我現在和目前正在學習反應，制作一個待辦事項應用程式，以便我可以更輕松地理解反應。所以這就是我想要做的：
- 用戶點擊一個按鈕
- 點擊會觸發一個提示，詢問用戶待辦事項的標題（目前只有標題）
- 然后，將該標題添加到所有待辦事項的陣列中
- 然后，使用該陣列在頁面上顯示每個待辦事項
代碼：
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>
);
const [check, setCheck] = useState(false);寫成這樣我就可以訪問陣列if todo.length !== 0;
問題出在渲染部分。我想不出一種方法來在他們自己的<TodoItems/>組件中顯示每個待辦事項，而且在使用時forEach()，什么也沒有發生，因為我認為有人告訴我這setState()是異步作業的。我真的需要一些建議！
謝謝...
uj5u.com熱心網友回復：
您正在使用
todo.forEach((eachTodo)=> {
<TodoItems title={eachTodo}/>
})
當你應該使用
todo.map((eachTodo)=> {
return <TodoItems title={eachTodo}/>
})
或者
todo.map((eachTodo)=> (
<TodoItems title={eachTodo}/>
))
您的組件中還有一個無限回圈：
useEffect(()=> {
if(todo.length !== 0) {
setCheck(true);
}
})
每次組件更新時，當待辦事項串列不為空時，您將 setCheck 設定為 true，這會觸發新的渲染。此外，您不需要對每個變數都使用狀態，只有發生更改的變數才會觸發重新渲染。
此外，您的新待辦事項串列狀態取決于之前的狀態，因此您應該使用功能更新。
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>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419537.html
標籤：
上一篇：ReactJS不渲染任何東西
下一篇：你用什么代替“。”在帕格？