我需要你的幫助。我正試圖通過 redux 獲取 API 資料。我擁有我需要的一切：action_types、action_creators、reducer。當我試圖繪制資料時，我得到一個錯誤。無法讀取未定義的屬性（讀取'map'）.我的錯誤是什么？非常感謝你。下面是我的代碼

cartoons.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'/span>);
        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"/span>。

let initialState = {
cartoons: []
}

let cartoon_reducer = (state = initialState, action) => {
switch（action.type） {
    case CARTOONS_ARE_LOADED: {
        return {
            ...狀態。
            cartoons: action.payloaddefault:
        return 狀態。
}
}
export default cartoon_reducer;

action_types.js

let CARTOONS_ARE_LOADED = 'CARTOONS_ARE_LOADED'/span>;
let DELETE_FAVOURITE_MOVIE = 'DELETE_FAVOURITE_MOVIE'/span>;
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"/span>;
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
})

uj5u.com熱心網友回復：

問題

let json = await response.json();

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

[
  {
    "title"。"Spongebob Squarepants",
    "年份": 1999,
    "創建者": [...
      "Stephen Hillenburg"。
    ],
    "評級": "TV-Y",
    "genre": [
      "喜劇",
      "家庭"。
    ],
    "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"。
    "年份": 1988,
    "創建者": [...
      "Karl Geurs",
      "Terence Harrison"。
      "Ken Kessel".
    ],
    "評級"。"TV-Y",
    "genre": [
      "冒險",
      "喜劇"。
    ],
    "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是未定義的，因此，不能映射。

解決方案

dispatch(cartoons_are_loaded(json)

完整的代碼：

const fetchCartoons = async ( ) => {
  try {
    let response = await fetch('https://api.sampleapis.com/cartoons/cartoons2D'/span>);
    let json = await response.json();
    console.log（json）。
    dispatch(cartoons_are_loaded(json)) // <--只傳遞`json`。
  } catch (e) {
    console.log(e)
  }
}

下面是一個使用本地狀態而不是redux的codeandbox的例子：

標籤：

上一篇：React狀態陣列（第一個輸入不作業

下一篇：覆寫setter屬性不呼叫