Блог

Я практикую redux-toolkit с typescript. Я использую один открытый API, а для извлечения данных я использовал redux toolkit createAsyncThunk . Я успешно смог получить данные в компоненте приложения. Когда я регистрирую его в консоли, я могу видеть данные, но как только я сопоставляю data.result , я получаю ошибку: TypeError: Cannot read property 'map' of undefined . Я думаю, что я допустил ошибку Typescript при использовании интерфейса. Но не вижу, в чем проблема, а также в Chrome reduxdevtools: data ожидайте объект, но я помещаю массивы. Это мой redux-devtools выглядит так. Я поделился своим кодом в 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,
        "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;
  

Это мой компонент, в котором я получаю ошибку при использовании функции map

 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. Итак, у вас действительно «сбой во время выполнения».