gpt4 book ai didi

arrays - Redux、React、MapStateToProps : Retrieve a specific element in an array from the redux state tree

转载 作者:行者123 更新时间:2023-12-04 01:58:10 24 4
gpt4 key购买 nike

我在 redux 状态树中有一个名为“leagues”的 reducer,它只是一个单独的联赛对象数组。每个联赛都有一个唯一的 ID(在后端分配)和一个名称。

我正在尝试编写一个代表单个联赛的组件,因此我想要一个 mapStateToProps 函数来检索正确的联赛。正确的联赛是从 url 中获知的,即通过 react-router-v4 中的 match Prop 。

我试过:

function mapStateToProps(state, ownProps) {
return {
league: state.leagues.find(aLeague => aLeague.id === ownProps.match.params.id)
}
}

但这导致错误“state.leagues.find”不是函数。

然后我试了一下

function mapStateToProps(state, ownProps) {
return {
league: state.leagues[ownProps.match.params.id]
}
}

这不会出错,但会检索到错误的联赛 - 如果 id 为 3,则检索 state.leagues[3],而不是 state.leagues.where(league.id === 3)

当我尝试访问单个联赛的页面时联赛的值(value):

leagues: [
{
id: 54,
name: 'Test League'
},
{
id: 55,
name: 'Another Test'
}
],

以及联盟 reducer 代码:

const initialState = {
leagues: []
};

export default (state = initialState, action = {}) => {
switch(action.type) {
case SET_USER_LEAGUES:
return state = action.leagues
case ADD_USER_LEAGUE:
return [
...state,
{
id: action.league.id,
name: action.league.name,
}
];
default: return state;
}
}

非常感谢任何帮助。谢谢!

最佳答案

这是因为当 redux store 被初始化时,你很可能将初始状态设置为 null 这就是为什么你得到错误 state.leagues.find is not一个函数,一旦通过异步 ajax 调用解决了状态,那么状态就在那里。我建议在像 componentDidMount 这样的 React 生命周期方法中制作这种逻辑,并在联盟状态可用后为联盟设置状态。像这样:

componentDidMount() {
const { leagues } = this.state;
if (leagues && leagues.length > 0) {
// update the state to the correct league here and this.props.id is the id that you want
const league = leagues.find(aLeague => aLeague.id === this.props.id);
this.setState({
league
}
}
}

希望对您有所帮助。

关于arrays - Redux、React、MapStateToProps : Retrieve a specific element in an array from the redux state tree,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49240416/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com