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

Question

我创建了一个简单的网站，您可以在其中跟踪货币并将它们添加到您最喜欢的列表中。我为此使用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;

我将不胜感激。

Answer 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>