我有以下從 App 組件呼叫的 ToDo 組件。當單擊“添加專案”按鈕時，我看到專案陣列正在從控制臺日志中正確更新，但專案的內容未顯示在按鈕下方。
function ToDo(){
const [items, setItems] = useState([])
const [currItem, setCurrItem] = useState('')
const handleClick = () => {
if(!currItem) return
console.log(currItem)
let temp = items
temp.push(currItem)
setItems([...temp])
console.log(items)
}
return(
<div>
<input type='text' onChange={(e) => setCurrItem(e.target.value)}/>
<br/>
<button onClick={handleClick}>Add Item</button>
<br/>
<div>
{
items.forEach(i => {
<div>{i}</div>
})
}
</div>
</div>
)
}
uj5u.com熱心網友回復：
你好嘗試通過添加這個來改變你的代碼
{items.map((v,i) => {
return <div key={v}>{i}</div>;
})}
uj5u.com熱心網友回復：
你的功能有問題handleClick試試這個
import React, { useState } from "react";
function ToDo() {
const [items, setItems] = useState([]);
const [currItem, setCurrItem] = useState("");
const handleClick = () => {
if (!currItem) return;
console.log(currItem);
let temp = [...items];
temp.push(currItem);
setItems(temp);
console.log(items);
};
return (
<div>
<input type="text" onChange={(e) => setCurrItem(e.target.value)} />
<br />
<button onClick={handleClick}>Add Item</button>
<br />
<div>
{items.map((i) => {
return <div>{i}</div>;
})}
</div>
</div>
);
}
export default ToDo;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/494679.html
標籤：javascript 反应 数组 反应钩子 渲染