我渲染了一個物件陣列，然后我試圖通過一個函式向它添加一個新屬性，但是這個新屬性值沒有渲染。當我控制臺記錄物件時，我可以看到屬性和新值在那里。該新屬性是tag。我認為這與e.preventDefault(). 我怎樣才能解決這個問題？
const addTag = (e,id) => {
e.preventDefault()
let text = e.target.tag.value
let obj = stu.find(x => x.id === id)
obj.tag = text
console.log(obj)
}
return (
<div className="App">
{stu.map((student, id) => (
<div key={id}>
<p>{student.email}</p>
<p>{student.firstName}</p>
<p>{student.tag}</p>
<form onSubmit={(e) => addTag(e, student.id)}>
<input type="text" id="tag"/>
<button type="submit">Submit</button>
</form>
</div>
))}
</div>
);
}
uj5u.com熱心網友回復：
您的狀態變數是一個陣列。修改該陣列中的物件，（甚至完全添加/洗掉元素）不會導致重新渲染的反應。對陣列的參考必須改變。一種簡單的方法是將元素復制到新陣列中：
const addTag = (e,id) => {
e.preventDefault()
let text = e.target.tag.value
let obj = stu.find(x => x.id === id)
obj.tag = text
setStu([...stu])
}
*您可能會遇到問題，因為您只鍵入元素索引。考慮更改您的鍵值
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/463967.html
標籤：javascript 反应