React-TypeScript-Redux-Toolkit：无法获取嵌套的api

问题描述

我正在用打字稿练习redux-toolkit。我使用了一个open api，并且为了获取数据，我使用了Redux工具包的createAsyncThunk。我成功获取了应用程序组件中的数据。当我进行控制台日志记录时，我可以看到数据，但是一旦映射data.result，我就会收到错误消息：TypeError: Cannot read property 'map' of undefined。我认为使用界面时出现Typescript错误。但是看不到问题出在哪里，而且在Chrome的reduxdevtools中：data期望对象，但是我放置了数组。这是我的redux-devtools looks like。 我在Codesand Box中共享了代码。

PS: I am sharing only these two files below because I think this is where I making mistakes

这是我的减速器，我认为我在类型上犯了错误

import { createSlice,createAsyncThunk } from "@reduxjs/toolkit";

export const dataFetch = createAsyncThunk(
  `store/dataFetch`,async () => {
    const url = `https://rickandmortyapi.com/api/character`;
    const response = await fetch(url);
    const data = await response.json();
    return data;
  }
);

interface Meta {
  loading: boolean;
  error: boolean;
  message: string;
}
// This is where I am making mistake
interface Results {
  name: string;
  image: string;
  gender: string;
  species: string;
  status: string;
}

interface Info {
  count: number;
  pages: number;
}

interface User {
  results: Results[];
  info: Info;

}

export interface IUser {
  Meta: Meta;
  data: User[];
}

const initialState: IUser = {
  "Meta": {
    "loading": false,"error": false,"message": ``
  },"data": []
};

const UserSlice = createSlice({
  "name": `JsonPlacehoder user`,initialState,"reducers": {

  },"extraReducers": (builder) => {
    builder.addCase(dataFetch.pending,(state) => (
      {
        ...state,"Meta": {
          ...state.Meta,"loading": true
        }
      }
    ));
    builder.addCase(dataFetch.fulfilled,(state,{ payload }) => (
      {
        ...state,"loading": false,"message": ``
        },"data": payload
      }
    ));
    builder.addCase(dataFetch.rejected,{ error }) => {
      window.alert(error?.message);
      return {
        ...state,"Meta": {
          "loading": false,"error": true,"message": error?.message || ``
        }
      };
    });
  }
});

export default UserSlice.reducer;

这是我使用地图功能时遇到错误的组件

import React,{ useEffect } from 'react';

import { useSelector,usedispatch } from 'react-redux'

import { dataFetch } from './store/reducers';
import { IRootState } from './store/combineReducers';

function App() {

  const { data,Meta } = useSelector((rootState: IRootState) => rootState.fetchUser);

  console.log(data);

  const dispatch = usedispatch()


  useEffect(() => {
    dispatch(dataFetch())
  },[dispatch])

  return (
    <div className="App">
      {
        data.results.map(i => { //GETTING ERROR
          return <div>
            <h1>{i.name}</h1>
          </div>
        })
      }
    </div>
  );
}

export default App;

解决方法

这是因为您正在尝试.map甚至还没有开始获取数据。

您的useEffect在第一次渲染后触发。在此之前，您已经尝试过.map次。 即使这样，在加载过程中，组件也可能会重新呈现。

加起来，您的某些化简趋向于实际上删除data属性，而不是保留data: []（我正在查看待处理项），导致在某些情况下data未定义渲染。

TypeError实际上不是TypeScript错误（这些错误始终以“ ts”开头，后跟数字），而是JavaScript运行时错误。因此，您这里确实发生了“运行时崩溃”。