如何使用最新添加的任务在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]);

叉子here。