使用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成为变量，所以我可以使用目标和原点来决定发生什么。

我被告知我不应该直接改变阵列的反应，所以这是我尝试不做变异的尝试。

我该怎么做呢？

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 doc