如何在一个函数中使用两个 useState 以便第二个 useState 可以使用第一个更新的 useState？

Question

反应：我正在尝试创建 todoapp，但负责添加新任务的组件出现问题。我想为新任务分配一个添加日期。这是我的组件（tasksList 是所有任务的列表）：

import { useState } from "react";

const ListHandler = ({ tasksList, setTasksList }) => {

  const [newTask, setNewTask] = useState({
    id: tasksList.length,
    content: "",
    done: false,
    active: true,
    date: null,
  });

  const inputHandler = (e) => {
    setNewTask((prevState) => ({
      ...prevState,
      content: e.target.value,
    }));
  };

  const addHandler = (e) => {
    e.preventDefault();
    setNewTask((prevState) => ({
      ...prevState,
      date: new Date().toTimeString().split(" ")[0],
    }));
    setTasksList((prevState) => [...prevState, newTask]);
  };

  return (
    <section className="listHandler">
      <form className="form">
        <input
          className="form__input"
          onChange={(e) => inputHandler(e)}
        ></input>
        <button className="form__button" onClick={(e) => addHandler(e)}>
          Add Task
        </button>
      </form>
    </section>
  );
};
export default ListHandler;

当我单击按钮时，我在 tasksList 中获得了一个日期为 null 的新任务，因为在更新 newTask 之前调用了 setTasksList，对吗？我的问题是如何解决这个问题？

Answer 1

发生这种情况是因为 newTask 将在下一次渲染中可用，例如您可以这样做：

    const addHandler = (e) => {
        e.preventDefault();
        const newDate = date: new Date().toTimeString().split(" ")[0];
        
        setNewTask((prevState) => ({
          ...prevState,
          date: newDate
        }));
       
        setTasksList((prevState) => [...prevState, {...newTask, date: newDate }]);
      };

Answer 2

这可能会解决您的问题创建了一个新状态 TaskName 用于处理更改输入并修复了 addhandler 函数和 inputhandler .

  const [newTask, setNewTask] = useState([]);
  const [taskName, setTaskName] = useState("");


    const inputHandler = (e) => {
      setTaskName(e.target.value);
    };
    const addHandler = (e) => {
      e.preventDefault();
      setNewTask([...newTask,{
        id: newTask.length+1,
        content: taskName,
        done: false,
        active: true,
        date: new Date().toTimeString().split(" ")[0],
      }]);
      setTaskName("");
    };

如何在一个函数中使用两个 useState 以便第二个 useState 可以使用第一个更新的 useState？

how to use two useState in one function so that the second useState can use the first updated useState?

javascript

reactjs

react-hooks

use-state