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

问题描述

我创建了一个简单的网站，您可以在其中跟踪货币并将其添加到您喜欢的列表中。为此我使用 http://api.nbp.pl/。有人告诉我使用 redux 进行状态管理。这个想法是，您可以单击 MainPage 组件中的“添加到您的收藏夹”按钮，其中所有货币呈现，数据存储在 FavouriteCurrencyList redux 存储中，它在收藏夹组件中呈现所选货币（MainPageItem 子组件）。我不知道为什么我一直收到类型错误：无法读取未定义错误的属性“列表”。商店工作正常，当我点击“添加到收藏夹列表按钮”时，我可以看到它按原样将信息传递到 FavouriteCurrencyList 内的列表（我在 Chrome 浏览器中使用 redux dev 工具扩展）。但是，当我想转到“收藏夹”选项卡时，我收到了上述错误。

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

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 store：

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;

我将不胜感激。

解决方法

我明白了..

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

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

你将在currencyStore变量中获得你的reducer完整状态..然后你可以像那样在dom中使用这个store变量

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