reactjs - 无法读取未定义的属性(读取 'map')

Question

我需要你的帮助。我正在尝试通过 redux 获取 API 数据。我拥有我需要的一切:action_types、action_creators、reducer。当我尝试绘制数据时，出现错误:Cannot read properties of undefined (reading 'map')。我的错误是什么？非常感谢你。这是我的代码

卡通.js

import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {cartoons_are_loaded} from "../redux/action_creators";

export let Cartoons = () => {

let dispatch = useDispatch();
let cartoons = useSelector(({cartoon_reducer: {cartoons}}) => cartoons);

let fetchCartoons = async () => {
    try {
        let response = await fetch('https://api.sampleapis.com/cartoons/cartoons2D');
        let json = await response.json();
        console.log(json);
        dispatch(cartoons_are_loaded(json.data))
    } catch (e) {
        console.log(e)
    }
}

useEffect(() => {
   if (!cartoons.length){
       fetchCartoons();
   }
},[])

return (<div>
    {cartoons.map(el => <div key={el.id}>{el.title}</div>)}
        </div>)
}

reducers.js

import {CARTOONS_ARE_LOADED} from "./action_types";

let initialState = {
cartoons: []
}

let cartoon_reducer = (state = initialState, action) => {
switch (action.type) {
    case CARTOONS_ARE_LOADED: {
        return {
            ...state,
            cartoons: action.payload
        }
    }

    default:
        return state;
}
}
export default cartoon_reducer;

action_types.js

let CARTOONS_ARE_LOADED = 'CARTOONS_ARE_LOADED';
let DELETE_FAVOURITE_MOVIE = 'DELETE_FAVOURITE_MOVIE';
let ADD_FAVOURITE_CARTOON = 'ADD_FAVOURITE_MOVIE';
export {
CARTOONS_ARE_LOADED,
ADD_FAVOURITE_CARTOON,
DELETE_FAVOURITE_MOVIE
}

action_creators.js

import {
CARTOONS_ARE_LOADED,
} from "./action_types";
let cartoons_are_loaded = (payload) => ({type : CARTOONS_ARE_LOADED, payload});
export {
cartoons_are_loaded
}

all_reducers.js

import cartoon_reducer from "./reducers";
import {combineReducers} from "redux";
export let root_reducer = combineReducers({
cartoon_reducer
})

Answer 1

问题

JSON 响应已经 一个数组。

let json = await response.json();

// 20210915235745
// https://api.sampleapis.com/cartoons/cartoons2D

[
  {
    "title": "Spongebob Squarepants",
    "year": 1999,
    "creator": [
      "Stephen Hillenburg"
    ],
    "rating": "TV-Y",
    "genre": [
      "Comedy",
      "Family"
    ],
    "runtime_in_minutes": 23,
    "episodes": 272,
    "image": "https://nick.mtvnimages.com/uri/mgid:arc:content:nick.com:9cd2df6e-63c7-43da-8bde-8d77af9169c7?quality=0.7",
    "id": 1
  },
  ...
  {
    "title": "The New Adventures of Winnie the Pooh",
    "year": 1988,
    "creator": [
      "Karl Geurs",
      "Terence Harrison",
      "Ken Kessel"
    ],
    "rating": "TV-Y",
    "genre": [
      "Adventure",
      "Comedy"
    ],
    "runtime_in_minutes": 30,
    "episodes": 50,
    "image": "https://m.media-amazon.com/images/M/MV5BZjFkZDkwYjktMmZkNi00ZTVkLWI5ZmItZWI2MmI1NjQ1Y2U0XkEyXkFqcGdeQXVyOTg4MDk3MTQ@._V1_SY1000_CR0,0,666,1000_AL_.jpg",
    "id": 23
  }
]

没有 data 属性，或者换句话说，json.data 未定义，因此不可映射。

解决方案

只需使用 json JSON 数据值发送操作:

dispatch(cartoons_are_loaded(json))

完整代码:

const fetchCartoons = async () => {
  try {
    let response = await fetch('https://api.sampleapis.com/cartoons/cartoons2D');
    let json = await response.json();
    console.log(json);
    dispatch(cartoons_are_loaded(json)) // <-- pass just `json`
  } catch (e) {
    console.log(e)
  }
}

这是一个使用本地状态而不是 redux 的示例 codesandbox: