ToDo 渲染数据对象

Question

我只是在围绕构建一个虚拟的待办事项列表进行测试，并试图弄清楚一些事情。在使用包含 ID 和文本的新任务对象设置新状态时。好吧，当我 console.log(allTasks) 它只在我添加第二个任务后才开始显示数据数组时，一切正常只是我的问题？

const SearchInput = () => {
  const [taskValue, setTaskValue] = useState("");
  const [allTasks, setAllTasks] = useState([]);

  const handleChange = (e) => {
    setTaskValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (taskValue !== "") {
      setAllTasks([
        ...allTasks,
        { id: allTasks.length + 1, text: taskValue.trim() },
      ]);
    }
    setTaskValue("");
    console.log(allTasks);
  };

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Add a task..."
          value={taskValue}
          onChange={handleChange}
        />
        <button>Submit the Task</button>
      </Form>
      <div>
        {allTasks.length <= 0 ? (
          <p>No tasks</p>
        ) : (
          <ul>
            {allTasks.map((task) => (
              <li key={task.id}> {task.text} </li>
            ))}
          </ul>
        )}
      </div>
    </>
  );
};

Answer 1

根据文档，setState本质上是异步的，这意味着它只会在所有同步代码执行完后执行。 setState 将回调作为第二个参数，您可以使用它按预期记录它。

setAllTasks([
        ...allTasks,
        { id: allTasks.length + 1, text: taskValue.trim() },
      ], ()=>{
       console.log(alltasks)
});

Answer 2

这里是更新值，有条件的变化希望你会喜欢。

谢谢

const SearchInput = () => {

  const [taskValue, setTaskValue] = React.useState("");
  const [allTasks, setAllTasks] = React.useState([]);

  const handleChange = (e) => {
    setTaskValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (taskValue !== "") {
      setAllTasks([
        ...allTasks,
        { id: allTasks.length + 1, text: taskValue.trim() },
      ]);
    }
    setTaskValue("");
 
  };
  console.log(allTasks);

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Add a task..."
          value={taskValue}
          onChange={handleChange}
        />
        <button>Submit the Task</button>
      </form>
      <div>
        {!allTasks.length && <p>No tasks</p>}
        {!!allTasks.length && 
          <ul>
            {allTasks.map((task) => (
              <li key={task.id}> {task.text} </li>
            ))}
          </ul>
        }
      </div>
    </>
  );
};

ToDo 渲染数据对象

ToDo rendering data object

reactjs

rendering