我有一個用 useState 更新的物件陣列。我可以在控制臺上看到我的陣列已成功更新。添加的新元素就在那里。但是，當我通過它映射時，不會顯示新元素。任何幫助將不勝感激。這是代碼
const Guesslist=()=>{
const [guestName, setGuestName]=useState('');
const [guesstLastName, setGuestLastName]=useState('');
const [guesstEmail, setGuesstEmail]= useState('');
const initialList={id:1, guesstName:'Alan', guesstLastName:'Williams',guesstEmail:'[email protected]'}
const [listOfGuesst, setListOfGuesst]= useState([initialList]);
let guesst={
id:Date.now(),
guestName:guestName,
guesstLastName:guesstLastName,
guesstEmail:guesstEmail
}
const addGuest= ()=>{
let newList=[...listOfGuesst, guesst];
setListOfGuesst(newList);
console.log(listOfGuesst);
}
useEffect(()=>{
console.log(listOfGuesst)}
,[listOfGuesst])
return(
<div>
<label htmlFor="">First Name</label>
<input type="text" onChange={(e)=>setGuestName(e.target.value)} value={guestName} />
<label htmlFor="">Last Name</label>
<input type="text" onChange={(e)=>setGuestLastName(e.target.value)} value={guesstLastName} />
<label htmlFor="">Email</label>
<input type="text" onChange={(e)=>setGuesstEmail(e.target.value)} value={guesstEmail} />
<button onClick={addGuest}>
add
</button>
<ul>
{listOfGuesst.map(element=>{
return <li key={element.id}>
{element.guesstName}
</li>
})}
</ul>
</div>
)
}
export default Guesslist
uj5u.com熱心網友回復：
()渲染組件時必須使用。
<ul>
{listOfGuesst.map(element => (
<li key={element.id}>
{element.guesstName}
</li>
))}
</ul>
uj5u.com熱心網友回復：
錯誤是您忘記了額外的 's'，首先您初始化和輸出guesstName，并在添加新來賓時 - guestName。
在這里guesstName：
const initialList = {
id:1,
guesstName:'Alan',
guesstLastName:'Williams',
guesstEmail:'[email protected]'
}
// ...some code
// and here guesstName
<ul>
{listOfGuesst.map(element=>{
return <li key={element.id}>{element.guesstName}</li>
})}
</ul>
當您添加新客人時 - guestName：
let guesst={
id:Date.now(),
guestName:guestName,
guesstLastName:guesstLastName,
guesstEmail:guesstEmail
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/337242.html