Redux TypeError：无法读取未定义的属性“列表”

Posted 2023-02-19

【中文标题】Redux TypeError：无法读取未定义的属性“列表”

【英文标题】：Redux TypeError: Cannot read property 'list' of undefined

【发布时间】：2021-09-30 11:21:28

【问题描述】：

我创建了一个简单的网站，您可以在其中跟踪货币并将它们添加到您最喜欢的列表中。我为此使用http://api.nbp.pl/。我被告知使用 redux 进行状态管理。这个想法是，您可以单击 MainPage 组件中的“添加到您的收藏夹”按钮，其中所有货币呈现，数据存储在 FavouriteCurrencyList redux 存储中，它在收藏夹组件中呈现所选货币（MainPageItem 子组件）。我不知道为什么我不断收到 TypeError: Cannot read property 'list' of undefined error。商店工作正常，当我单击“添加到收藏夹列表按钮”时，我可以看到它将信息传递到 FavouriteCurrencyList 内的列表中（我在 chrome 浏览器中使用 redux 开发工具扩展）。但是，当我想转到“收藏夹”选项卡时，我收到了上述错误。

这是我将所有货币呈现为 div 列表的 MainPage 组件：

import React,  useEffect, useState  from "react";
import MainPageItem from "./MainPageItem.js";
import "./MainPage.css";

function MainPage(props) 
  const [mids, setMids] = useState([]);
  const [codes, setCodes] = useState([]);

  useEffect(() => 
    fetch("http://api.nbp.pl/api/exchangerates/tables/A")
      .then((response) => 
        return response.json();
      )
      .then((data) => 
        const mid = data[0].rates.map((currency) => 
          return currency.mid;
        );
        setMids(mid);
      );
  , []);

  console.log(mids);

  useEffect(() => 
    fetch("http://api.nbp.pl/api/exchangerates/tables/A")
      .then((response) => 
        return response.json();
      )
      .then((data) => 
        const code = data[0].rates.map((currency) => 
          return currency.code;
        );
        setCodes(code);
      );
  , []);

  console.log(codes);

  const GetCurrencyRender = React.memo(( currency, mid ) => 
    return <MainPageItem codes=currency mids=mid />;
  , []);

  return (
    <div className="main-page">
      <div className="main-page__currecy-list-container">
        <div className="main-page__currency-list">
          codes.map((code, i) => (
            <MainPageItem key=i currency=code mid=mids[i] />
          ))
        </div>
      </div>
    </div>
  );


export default MainPage;

这是我使用 dispatch 方法的 MainPageItem 组件：

import React,  useCallback  from "react";
import "./MainPageItem.css";
import  useDispatch  from "react-redux";
import  saveCurrencies  from "../ducks/favouriteCurrencyList";

function MainPageItem(props) 
  const dispatch = useDispatch();

  const onClickAddToFavouritesButton = useCallback(() => 
    console.log();
    dispatch(saveCurrencies( currency: props.currency, mid: props.mid ));
  , [dispatch]);

  return (
    <div className="item__container">
      <div className="item__currency">props.currency</div>
      <div className="item__pln">PLN</div>
      <div className="item__mid">props.mid</div>
      <button className="button" onClick=onClickAddToFavouritesButton>
        Add Currency to Favourites!
      </button>
    </div>
  );


export default MainPageItem;

这是 FavouriteCurrencyList redux 商店：

import  createSlice  from "@reduxjs/toolkit";

const currencySlice = createSlice(
  name: "list",
  initialState: 
    list: [],
  ,
  reducers: 
    saveCurrencies(state, action) 
      const  currency, mid  = action.payload;
      state.list.push( currency: currency, mid: mid );
    ,
  ,
);

export const  saveCurrencies  = currencySlice.actions;

export default currencySlice.reducer;

这是 FavouriteCurrencyItem 组件。这个和 MainPageItem 之间的唯一区别是删除按钮。我打算制作一个删除按钮，让用户可以选择从收藏列表中删除货币：

import React,  useCallback  from "react";
import "./FavouriteCurrencyItem.css";
import  useDispatch  from "react-redux";
import  saveCurrencies  from "../ducks/favouriteCurrencyList";

function FavouriteCurrencyItem(props) 
  const dispatch = useDispatch();

  const onClickRemoveFavouriteCurrencyButton = useCallback(() => , [
    dispatch,
  ]);

  return (
    <div className="favourite-item__container">
      <div className="favourite-item__currency">props.currency</div>
      <div className="favourite-item__pln">PLN</div>
      <div className="favourite-item__mid">props.mid</div>
      <button className="button" onClick=onClickRemoveFavouriteCurrencyButton>
        Remove currency from your favourites
      </button>
    </div>
  );


export default FavouriteCurrencyItem;

这是应呈现所选货币的收藏夹组件：

import React from "react";
import MainPageItem from "../mainPage/MainPageItem";
import  useSelector  from "react-redux";
import "../mainPage/MainPage.css";
import  saveCurrencies  from "../ducks/favouriteCurrencyList";

function Favourites(props) 
  const currencyStore = useSelector((state) => state.list);

  const GetCurrencyRender = React.memo(( currency, mid ) => 
    return <MainPageItem currency=currency mid=mid />;
  , []);

  return (
    <div className="main-page">
      list of favourite currencies
      <div className="main-page__currecy-list-container">
        <div className="main-page__currency-list">
          currencyStore.list.map((currency, mid) => 
            return <GetCurrencyRender currency=currency mid=mid />;
          )
        </div>
      </div>
    </div>
  );


export default Favourites;

我将不胜感激。

【参考方案1】：

我明白了..

在下面一行替换你的 Reducer 名称

  const currencyStore = useSelector((state) => state["yourReducerName"]);

您将在currencyStore 变量中获得reducer 完整状态..然后您可以像这样在dom 中使用这个商店变量

<div className="main-page__currency-list">
          currencyStore.list.map((currency, mid) => 
            return <GetCurrencyRender currency=currency mid=mid />;
          )
</div>

【讨论】：

嘿，我刚刚尝试了你的建议，不幸的是我得到了完全相同的错误。但是感谢您的帮助！

在组件收藏夹中。这是我想根据商店中收集的信息来渲染子组件的地方。当我单击收藏选项卡（尝试输入收藏组件）时，我收到此错误。

@WorstProgrammerEver 再次查看我的答案，我已对其进行了编辑。希望对您有所帮助