如何在渲染结果后清空我的状态?

Question

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

第一个:当我在我的输入上写一些东西时，我点击我的按钮(addTask)，我需要点击2次才能在我的控制台.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;

Answer 1

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>
))}

Answer 2

您的第一个问题是您在"console.log()"并且console.log的性质是它显示先前的值/数据(状态)，因此最好使用"alert()"相反。

Answer 3

todoList是数组，你需要在这里迭代检查https://reactjs.org/docs/lists-and-keys.html

<div>
<h1>Tâches terminées</h1>
{encours === "supprimée" ? (
<div>
{todoList.map(value => <p>{value}</p>}
</div>
) : (
<div></div>
)}
</div>

Answer 4

关于console.log，您在更改状态后打印结果，状态更新是异步的，因此不会立即发生。可以改成

const AddTask = (e) => {
const newList = [...todoList, task]
console.log(newList);
setTodoList(newList);
};

关于第二部分，这个条件是多余的{todoList !== "" ? (todoList是一个数组，如果它是空的。map永远不会被执行。

你能把这个注释掉并检查{encours === "terminé" ? (吗?

也不能在jsx中打印Array

<div>
// <p>{todoList}</p>
<p>{JSON.stringify(todoList, null, 2)</p> --< try this
</div>

Answer 5

你在代码中做了一堆错误的事情。

1-由于设置状态的过程是异步的，在setTodoList之后记录todoList状态不会给你它的最新版本。

要记录你状态的最新版本，你必须注册一个效果:

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

2-最好使用setTodoList(todoList => [...todoList, task]).

3-由于todoList是一个数组，检查todoList !== ""是多余的，它总是通过。

4-您错过了返回这里的DOM节点:

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

5-你也错过了使用一个体面的key道具循环:

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

查看这篇文章，了解更多关于这件事的信息。

---

对于你的主要问题"如何清空你的状态";您必须使用受控文本输入而不是非受控文本输入:

<input onChange={handleInput} value={task} />

然后清空状态，你所要做的就是:

const AddTask = (e) => {
setTodoList(state => [...state, task]);
setTask("");
};