如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。