TypeScriptError： Type'Data'不能分配给type'string'

Question

我正在为我的应用程序使用React-typescript。对于状态管理，我使用Redux工具包。我正在获取一个开放api并将其存储到我的redux存储库中。我创建了分派函数。当我点击dispatch函数时，它将显示随机狗图像。但问题是当我使用这个img src时，在映射之后。我收到typescript错误：类型“数据”不能分配给类型“字符串”。我不知道我做错了什么。我在codesandbox中上传了我的代码，虽然它在codesandbox中工作，但在我的应用程序中不工作。

另外，我没有上传我的商店设置代码，因为它可以找到☺️.

这是我的减速机

    /* eslint-disable @typescript-eslint/indent */
    import { createSlice, PayloadAction } from '@reduxjs/toolkit';
    import { AppThunk } from "store/store";
    
    interface IMeta {
      loading: boolean;
      error: boolean;
      message: string;
    }
    
    interface Data {
      src: string;  
    }
    
    interface IDogs {
      meta: IMeta;
      dogs: Data[];
    }
    
    const initialState: IDogs = {
      "meta": {
        "loading": false,
        "error": false,
        "message": ``
      },
      "dogs": []
    };
    
    const dogSlice = createSlice({
      "name": `random-dogs`,
      initialState,
      "reducers": {
        loadState(state) {
          state.meta = {
            "loading": true,
            "error": false,
            "message": ``
          };
          state.dogs = [];
        },
        fetchData(state, action: PayloadAction<Data[]>) {
          state.meta.loading = false;
          state.dogs = action.payload;
          console.log(`dogs`, action.payload);
        },
        loadFailed(state, action: PayloadAction<string>) {
          state.meta = {
            "loading": false,
            "error": true,
            "message": action.payload
          };
          state.dogs = [];
        }
      }
    
    });
    
    export const { loadState, fetchData, loadFailed } = dogSlice.actions;
    export default dogSlice.reducer;
    
    export const fetchDogs = (): AppThunk => async (dispatch) => {
      const url = `https://dog.ceo/api/breeds/image/random/5`;
    
      try {
        dispatch(loadState);
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        console.log(data.message);
        const singleData = data.message.map((i) => i);
        dispatch(fetchData(singleData));
      } catch (error) {
        dispatch(loadFailed(`dogs are unavailable`));
        console.log({ error });
      }
    };

这是我在使用redux商店的组件

    import React, { memo } from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { fetchDogs } from 'store/dogs';
    import { RootState } from 'store/combineReducer';
    
    export default memo(() => {
      const state = useSelector((rootState: RootState) => ({
        "dogs": rootState.fetchDogs.dogs,
        "meta": rootState.fetchDogs.meta
      }));
      const dispatch = useDispatch();
      console.log(`Dog component`, state.dogs[0]);
    
      return (
        <div>
          {state.meta.loading ? <p>loading....</p> :
            state.dogs.map((i, index) =>
              <div key={index}>
                <ul>
                  <li>{i}</li> // I can see the strings
                </ul>
                <img style={{ "width": 50, "height": 50 }} src={i} /> //getting error in here
              </div>)}
          <br></br>
          <button onClick={() => dispatch(fetchDogs())}> display random dogs</button>
        </div>
      );
    });

Answer 1

情况如下：

• 接口IDog具有数据[]类型的属性“dogs”。

你现在正经过我的狗。您需要深入IDogs.dogs.src以获取所需的源字符串。

因此，App.tsx的第25行应该是这样的，并且似乎一切正常：

PS:codesandbox示例仍然有效，因为它显然做了某种假设，即您需要src属性，但正如您看到的，仍然会出现错误。

编辑：经过一些拨弄的答案如下。然而，它与上面写的东西有关。

我下载了您的项目，并尝试在我的PC上运行npm。我做了两件事使其工作：

1. 我更新了第25行以使用强制转换：src={String（i）}

2. 我更新了反应脚本。请参阅此线程以供参考： TypeError[ERR_INVALID_ARG_TYPE]：路径参数必须是字符串类型。接收类型未定义时提出启动反应应用程序