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

时间:2018-03-02 07:18:30

标签: javascript arrays reactjs redux

所以我想压缩我将一个元素从一个数组移动到另一个数组的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
  });

我希望addArryuserArry成为变量,因此我可以使用目标和来源来决定发生了什么。

有人告诉我,我不应该直接改变阵列的反应,所以这是我尝试不做变异的尝试。

我将如何做到这一点?

1 个答案:

答案 0 :(得分:2)

概念是不能直接操作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