如何使React中的状态随着上一次添加的任务而更新？

Question

我正在构建一个简单的待办事项应用程序，在我实现了react-sortable-hoc之后-如果你不知道这是一个实现拖放的react插件-待办事项列表不会再更新最后添加的待办事项。在控制台中我没有得到任何类型的错误。

我尝试使用在react-sortable-hoc onSortEnd函数中排序的状态，但是我得到了传播不可迭代实例错误的无效尝试。

This is the application an codesandbox

我想用最新添加的待办事项更新状态。

Answer 1

我可以看到你的代码有两个问题：

1)在Form.js中，您实际上没有将状态设置为表单提交时包含最新值的新数组。在handleSubmit函数中，您需要调用setState(createNewTask(value))，而不仅仅是createNewTask(value)。

2)使用一个名为alteredState的单独状态来实际创建列表，并在主状态下使用tasks数组对其进行初始化。但是，当主阵列发生更改时，您不会更新第二个阵列，因为传递给useState的值仅在挂载时设置一次。当第一个状态发生更改时，您可以使用useEffect挂钩来更新次要状态：

useEffect(() => {
    setAlteredState(state.tasks);
  }, [state]);

Fork here。