reactjs - 渲染结果后如何清空状态？

问题描述

我做了一个待办事项清单，我有 2 个问题。

第一个：当我在我的输入上写一些东西并点击我的按钮（addTask）时，我需要点击 2 次才能在我的 console.log 上得到结果。当我第一次点击时，我怎么能直接得到结果？

第二个：我的 .map 上没有呈现任何内容，但我的所有值都在我的数组 todoList 上。我做错什么了吗？

function Task() {
  const [task, setTask] = useState("");
  const [encours, setEncours] = useState("en cours");
  const [todoList, setTodoList] = useState([]);

  const switchEnCours = () => {
    setEncours("terminé");
  };

  const deleteTask = () => {
    setEncours("supprimée");
  };

  const handleInput = (e) => {
    e.preventDefault();
    setTask(e.target.value);
  };
  const AddTask = (e) => {
    setTodoList([...todoList, task]);

    console.log(todoList);
  };

  return (
    <div>
      <input onChange={handleInput}></input>
      <button onClick={AddTask}>Valider</button>
      <div className="DivColonne">
        <div className="Colonne">
          <h1>Tâche à faire</h1>
          {todoList !== "" ? (
            todoList.map((insertTask) => {
              <div>
                <p>{insertTask}</p>
                <button onClick={switchEnCours}>{encours}</button>
              </div>;
            })
          ) : (
            <div></div>
          )}
        </div>
        <div className="Colonne">
          <h1>Tâche en cours</h1>
          {encours === "terminé" ? (
            <div>
              {todoList.map((insert) => {
                return (
                  <div>
                    <p>{insert}</p>
                    <button onClick={deleteTask}>{encours}</button>
                  </div>
                );
              })}
            </div>
          ) : (
            <div></div>
          )}
        </div>
        <div>
          <h1>Tâches terminées</h1>
          {encours === "supprimée" ? (
            <div>
              <p>{todoList}</p>
            </div>
          ) : (
            <div></div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Task;

标签： reactjs

React 状态更新是异步处理的。这意味着您不能在更新已入队后立即通过控制台记录状态并期望看到更新的值。使用useEffect依赖于您要更新的状态的挂钩来记录状态更新。

useEffect(() => console.log(todoList), [todoList]);

当您映射待办事项时，您也不会返回 JSX。

{todoList.map((insertTask) => {
  <div>
    <p>{insertTask}</p>
    <button onClick={switchEnCours}>{encours}</button>
  </div>;
})}

应该

{todoList.map((insertTask) => {
  return (
    <div>
      <p>{insertTask}</p>
      <button onClick={switchEnCours}>{encours}</button>
    </div>
  );
})}

或直接退回

{todoList.map((insertTask) => (
  <div>
    <p>{insertTask}</p>
    <button onClick={switchEnCours}>{encours}</button>
  </div>
))}

不要忘记在 React 中映射列表和数组时使用 React 键。如果您的任务没有独特的属性，那么我强烈建议您在创建每个待办事项时为其添加一个 GUID。

例子：

{todoList.map((insertTask) => (
  <div key={task.id}>
    <p>{insertTask}</p>
    <button onClick={switchEnCours}>{encours}</button>
  </div>
))}

reactjs - 渲染结果后如何清空状态？

问题描述

解决方案

推荐阅读