use-reducer - 具有新顺序的数组的减速器有效负载不更新状态

Question

首先，这是一个 CodeSandbox：https ://codesandbox.io/s/todolist-reducer-0y3mb?file=/src/context/TodosReducer.js

问题是即使我将带有新数组的有效负载传递给减速器，状态也没有更新。

我正在重新排列数组，如下所示：

  const rearrange = (array, source, destination) => {
    const newArray = [...array];
    const newItem = array[source];
    newArray.splice(source, 1);
    newArray.splice(destination, 0, newItem);

    return newArray;
  };

然后发送它：

  const endDrag = newArray => {
    dispatch({
      type: "endDrag",
      payload: newArray
    });
  };

然后我在减速器中返回新状态。

 return {
        ...state,
        todos: action.payload
      };

记录有效载荷表明它是好的，但状态仍然没有更新。我正在使用 react beautiful dnd，所以也许这与它有关。

Answer 1

我发现了问题并解决了它！

原来我将容器组件包装在全局上下文提供程序中，但在容器内部也是如此。这显然会导致这样的事情。如此简单，但我并没有想到。

希望这个答案可以帮助那里的人。