如何使用最后添加的任务在 React 中更新状态？

Question

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

我尝试使用在 react-sortable-hoc onSortEnd 函数中排序的状态，但随后出现 Invalid attempt to spread non-iterable instance 错误。

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

Answer 1

您的代码有 2 个问题，我可以看到：

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

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

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

分叉here.

如何使用最后添加的任务在 React 中更新状态？

How to make the state update in React with the last added task?

reactjs

react-hooks

react-sortable-hoc