在React setState中使用变量将元素从一个数组移动到另一个数组？

Question

因此，我想浓缩2个将元素从一个数组移到另一个数组的函数。 被修改的数组需要是变量，因此我可以在任意两个数组上使用它。

这是我目前拥有的功能

clickedEventHandler = (index, target, origin) => {
  let tempArry = [...origin];
  console.log(tempArry);
  let resultedArry = [...target];

  resultedArry.push(tempArry[index]);
  tempArry.splice((index, 1)[index]);

  console.log(resultedArry);
  console.log(tempArry);

  this.setState({
    addedArry: resultedArry,
    userArry: tempArry
  });
}

我正在尝试从原始数组中获取一个元素并将其移至目标数组。 这意味着我也需要从原点删除它，所以它是剪切的，而不是副本。

  this.setState({
    addedArry: resultedArry,
    userArry: tempArry
  });

我希望addArry和userArry是变量，因此我可以使用target和origin来确定发生了什么。

有人告诉我，我不应该在响应中直接改变数组，所以这是我尝试不改变的尝试。

我将如何去做呢？

Answer 1

这个概念是，一定不能直接操作Redux存储，因此在Redux reducer中，您可以将一个项目添加到存储数组中，例如

case ADD_ITEM :
return { 
    ...state,
    arr: state.arr.concat(action.newItem)
}

您可以从Redux存储中的数组中删除项目，例如

case DELETE_ITEM :
    const newState = Object.assign([], state);
    newState.splice(index, 1);
    return newState;

我们还可以使用lodash库并实现

import _ from 'lodash';

case ADD_ITEM:
     refArr = _.clone(state.arr);
     refArr.push('data');
     return Object.assign({}, state, {arr: refArr});

case DELETE_ITEM:
     refArr = _.clone(state.arr);
     refArr.splice(index, 1);
     return Object.assign({}, state, {arr: refArr});

Redux Reducer文档