[英]Appending a div in React using React hooks
I'm learning react at the moment and currently, making a todo app so that I can understand react more easily.我现在和目前正在学习反应,制作一个待办事项应用程序,以便我可以更轻松地理解反应。 So here's what I'm trying to do:所以这就是我想要做的:
Code:代码:
const [check, setCheck] = useState(false);
const [todo, setTodo] = useState([]);
function handleClick() {
let toAdd = prompt('Title: ')
setTodo([...todo, {
title: toAdd
}]);
}
useEffect(()=> {
if(todo.length !== 0) {
setCheck(true);
}
})
return (
<div className="wholeContainer">
<div className="tododiv">
<span className="todos">Todos: </span>
<hr/>
{
check ?
todo.forEach((eachTodo)=> {
<TodoItems title={eachTodo}/>
})
: <span>Nothing</span>
}
</div>
<button className="add" onClick={handleClick}>
<i className="fas fa-plus"></i>
Add a Todo
</button>
</div>
);
The const [check, setCheck] = useState(false);
const [check, setCheck] = useState(false);
is written so that I can access the array if todo.length !== 0
;如果todo.length !== 0
,我可以访问数组;
The problem comes in the rendering part.问题出在渲染部分。 I can't figure out a way to display each and every todo in their own <TodoItems/>
component, and also when using forEach()
, nothing happens because I think that someone told me that setState()
works asynchronously.我想不出一种方法来在他们自己的<TodoItems/>
组件中显示每个待办事项,并且在使用forEach()
时,什么也没有发生,因为我认为有人告诉我setState()
是异步工作的。 I really need some advice!我真的需要一些建议!
Thanks...谢谢...
You are using您正在使用
todo.forEach((eachTodo)=> {
<TodoItems title={eachTodo}/>
})
When you should be using当你应该使用
todo.map((eachTodo)=> {
return <TodoItems title={eachTodo}/>
})
Or或者
todo.map((eachTodo)=> (
<TodoItems title={eachTodo}/>
))
Also you have an infinite loop in your component:您的组件中还有一个无限循环:
useEffect(()=> {
if(todo.length !== 0) {
setCheck(true);
}
})
Each time the component updates, when the todo list isn't empty, you setCheck to true which triggers a new render.每次组件更新时,当待办事项列表不为空时,您将 setCheck 设置为 true,这会触发新的渲染。 Also, you don't need to use state for every variable, only the ones were a change should trigger a re-render.此外,您不需要对每个变量都使用 state,只有更改才会触发重新渲染。
Also your new todo-list state depends on the previous state so you should use a functional update.此外,您的新待办事项列表 state 取决于以前的 state,因此您应该使用功能更新。
https://reactjs.org/docs/hooks-reference.html https://reactjs.org/docs/hooks-reference.html
const [todoList, setTodoList] = useState([]);
function handleClick() {
let toAdd = prompt('Title: ');
setTodoList((prevTodoList) => [...prevTodoList, toAdd]);
}
const isTodoListEmpty = todoList.length === 0
return (
<div className="wholeContainer">
<div className="tododiv">
<span className="todos">Todos: </span>
<hr />
{!isTodoListEmpty ? (
todoList.forEach((todoItem) => {
<TodoItems title={todoItem} />;
})
) : (
<span>Nothing</span>
)}
</div>
<button className="add" onClick={handleClick}>
<i className="fas fa-plus"></i>
Add a Todo
</button>
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.