繁体   English   中英

React/Redux 关于调度操作以将项目添加到数组的问题

[英]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 并且我被阻止我的代码哪里出错了。

Redux state 未加工

您需要解构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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM