Question

我有一个项目，我使用react-redux，我有一个reducer，它应该在数组中添加一个元素并返回新数组。我怎么能这样做？

/*---- Reducer ----*/
case CHANGE_EVENT_USERS:
  return { ...state, users: payload };
 
/*---- Here's my hopeless tryings ----*/

userClickHandler() {
  const { id, homeFloor, avatarUrl, login } = this.props;
  const user = { id, homeFloor, avatarUrl, login };
  this.props.changeEventUsers([...user]); // []
  this.props.changeEventUsers(this.props.event.users.push()); // number
}

Answer 1

我更喜欢concat的语法。在你的减速机上做：

case CHANGE_EVENT_USERS:
  return users.concat(action.payload);

Answer 2

直接在减速器中添加。

从您的组件

this.props.changeEventUsers(newUser); // add the new user

在减速机中

return { ...state, users: [...state.users, payload] };

我假设“payload”包含来自操作的信息，users数组默认初始化为空数组值[]

Answer 3

我不确定我是否理解正确，但根据我的理解，问题的解决方案看起来像这样：

case CHANGE_EVENT_USERS:
  return { ...state, users: [ ...state.users, action.payload ] };

Answer 4

使用concat()

const initialArray = [1, 2, 3];  
const elemenToAdd = 4; 
const newArray= initialArray.concat([elementToAdd]);

[1,2,3,4]

注意我在这里使用const来强调初始数组没有变异。

上述方法的优点在于，它可以用于将操作链接在一起 result = initialArray.concat(..).filter(..).concat(..);
（其中..表示跳过的代码详细信息）

您也可以通过传入数组作为参数来使用concat：
newArray = concat(initialArray, [elementToadd])

或者使用es7扩展运算符语法进行数组连接：
newArray = [...initialArray, elementToAdd, ...[5], [6] ];

[1,2,3,4,5，[6]]

使用...将提供的数组的各个元素作为新数组中的元素发送;没有点，提供的数组本身就是元素。

因此，在您的情况下，相关的行可以写成：

Answer 5

我找到了解决方案：

this.props.changeEventUsers([...this.props.event.users, user]);

在React-Redux中添加数组中的一个元素

5 个答案: