Reactjs 在Redux中更新深度嵌套数组的状态时出现问题

我在redux有一个州，看起来像这样：

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

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

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

            ]
        ]
    }
}

我可能还需要再深入两层

---

非常感谢您的帮助。

我建议您复制一份

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
    }

---

所显示的只是一级深度的修改，但您可以通过导航阵列/对象级别并修改需要修改的值，使其任意深度。

我建议制作一份

拾取方块的副本，然后直接修改副本。由于
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
    }

所显示的只是一级深度的修改，但您可以通过导航数组/对象级别并修改需要修改的值使其任意深度。
可能不是最好的方法，但可以：

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;
}

也许不是最好的方法，但有效：

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;
}

pickedSquares
是数组吗？元素的顺序是否重要（比如，如果它在更新状态后被更改了，这样可以吗）？是的，它是一个数组。顺序很重要，而且不能更改，因为它基本上包含用于呈现动态内容的键是
pickedSquares
数组？元素的顺序是否重要（比如，如果它在更新状态后被更改了，这样可以吗）？是的，它是一个数组。顺序确实很重要，而且不能更改，因为它基本上包含用于呈现动态内容的键。在尝试此操作时，我会遇到一些奇怪的无休止的循环，但可能与另一段代码有关。在它循环之前，它似乎是按照我想要的方式更新的，所以我会对它进行更多的测试并相应地更新，谢谢。在尝试这个过程中，我得到了一些奇怪的无休止的循环，但可能它与另一段代码有关。在它循环之前，它似乎是按照我想要的方式更新的，所以我将对它进行更多的测试并相应地更新，谢谢