[英]React/Redux question about dispatching an action to add an item to an array
我正在构建一个抽认卡应用程序,我想将看到的卡片的 ID 存储在一个数组中,所以我的 GET_RANDOM_CARD 操作不会 select 同一张卡片两次。
在我的 componentDidMount 方法中,我发送 addSeenCard 操作,如下所示:
addSeenCard(this.props.randomCard)
这是我用于 addSeenCard 的便携式动作创建器 function:
export function addSeenCard(randomCard) {
return {
type: 'ADD_SEEN_CARD',
randomCard: randomCard
}
}
这是我的减速机 function:
case 'ADD_SEEN_CARD':
return {
...state,
seenCard: [state.seenCard, action.randomCard.id]
}
但是,Redux 工具没有显示具有 id 值的数组,而是显示了一个具有嵌套空数组且值为 null 的数组。 我正在学习 Redux 并且我被阻止我的代码哪里出错了。
您需要解构state.seenCard
,就像您对...state
所做的那样:
case 'ADD_SEEN_CARD':
return {
...state,
seenCard: [...state.seenCard, action.randomCard.id]
}
从上面的 reducer 代码中,可以知道“seenCard”将是一个 id 数组,并且您已将数组指定为 seeCard 的第一个元素。
因此,请使用 Spread 运算符来解构元素数组。
case 'ADD_SEEN_CARD':
return {
...state,
seenCard: [
...state.seenCard,
action.randomCard.id
]
}
请注意在第 5 行代码中添加的 3 个点。
此外,确保 id 始终传递给操作创建者。
我希望这是有帮助的!
您可以使用 concat state seenCard 数组和新值这是您更新的减速器 function:
case 'ADD_SEEN_CARD':
return {
...state,
seenCard: state.seenCard.concat(action.randomCard.id)
}
这就是我在减速器(扩展运算符)中所缺少的。 非常感谢,您的所有答案都有效。 因为我将随机卡存储在 state 中,所以我决定使用空有效负载发送 ADD_SEEN_CARD function 并执行以下操作:
case 'ADD_SEEN_CARD':
return {
...state,
seenCard: state.seenCard.concat(state.randomCard[0].id)
// seenCard: [...state.seenCard, state.randomCard[0].id]
}
再次感谢您的所有回答。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.