在Redux中深层嵌套数组的更新状态有问题

Question

我在redux中有一个状态，如下所示：

我正在尝试更新所选数组的“ false”标志，但是在redux中难以掌握这种深层嵌套的数组修改。

这是我的看法，这给了我语法错误：

case 'SET_FLAG':{
    return {
        ...state,
        pickedSquares: [
            ...state.pickedSquares,
            pickedSquares[action.index]: [
                ...state.pickedSquares[action.index],

            ]
        ]
    }
}

我可能还需要再深入两个级别。

我会很感激。

Answer 1

我建议制作pickedSquares的副本，然后直接修改副本。由于pickedSquares是一个数组，而不是JS对象，因此您将无法以当前尝试的方式散布和覆盖值。

以下是根据您提供的代码解决问题的方法的示例：

case 'SET_FLAG':
    const pickedSquaresCopy = JSON.parse(JSON.stringify(state.pickedSquares)); //make a deep copy
    pickedSquaresCopy[action.index] = action.newValue;
    return {
        ...state,
        pickedSquares: pickedSquaresCopy
    }

显示的只是一个深度的修改，但是您可以通过导航数组/对象级别并修改需要修改的值来使它们任意深度。

Answer 2

也许不是最好的方法，但是可行：

case "SET_FLAG": {
  const newArr = state[action.payload].map(el => {
    if (el === false) {
      return true;
    }
    return el;
  });

  const newState = state.map((el, index) => {
    if (index === action.payload) {
      return newArr;
    }
    return el;
  });

  return newState;
}

我不知道这种表现如何。也许您可以尝试按照@Henry Wood的建议进行深拷贝，并找到嵌套更改的方法。但是使用我的方法，您也不会在不进行深层复制的情况下直接改变状态。

如果您喜欢三元运算符：

case "SET_FLAG": {
  const newArr = state[action.payload].map(el =>
    el === false ? true : el
  );

  const newState = state.map((el, index) =>
    index === action.payload ? newArr : el
  );

  return newState;
}