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

Question

所以我想压缩 2 个函数，我可以将一个元素从一个数组移动到另一个数组。被修改的数组需要是变量，所以我可以在任何 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 成为变量，这样我就可以使用目标和原点来决定去哪里。

有人告诉我，我不应该在 react 中直接改变数组，所以这是我尝试在不改变的情况下这样做。

我该怎么做呢？

Answer 1

这个概念是不能直接操作Redux store，所以在Redux reducer中你可以像这样添加一个item来存储数组

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 doc