React-typescript-Redux-toolkit：无法获取嵌套 api

Question

我正在用 typescript 练习 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

这是我的 Reducer，我认为我的类型有误

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,
        "meta": {
          ...state.meta,
          "loading": false,
          "error": false,
          "message": ``
        },
        "data": payload
      }
    ));
    builder.addCase(dataFetch.rejected, (state, { 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;

Answer 1

那是因为您甚至在开始提取之前就试图 .map 覆盖数据。

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

结合你的一些reducer实际上倾向于删除data属性而不是保留data: []（我正在查看待定在那里）导致data在某些渲染中未定义。

TypeError 实际上不是 TypeScript 错误（这些错误总是以“ts”开头，后跟一个数字），而是 JavaScript 运行时错误。所以你真的有一个“运行时崩溃”。