我在洗掉元素時遇到問題。它不會洗掉特定元素，而是僅洗掉最后一個新創建的元素。我不確定我哪里出錯了。我參考了
洗掉上次創建：
uj5u.com熱心網友回復：
我認為主要問題是您設定為 react doc 所說的專案的關鍵：
當您沒有呈現專案的穩定 ID 時，您可以將專案索參考作鍵作為最后的手段：
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
如果專案的順序可能發生變化，我們不建議對鍵使用索引。這會對性能產生負面影響，并可能導致組件狀態出現問題。查看 Robin Pokorny 的文章，深入了解使用索引作為鍵的負面影響。如果您選擇不為串列項分配顯式鍵，那么 React 將默認使用索引作為鍵。
正如這篇文章所說：
當索參考作鍵時，重新排序串列或從串列中添加和洗掉專案可能會導致組件狀態出現問題。如果鍵是一個索引，重新排序一個專案會改變它。因此，組件狀態可能會混淆，并可能將舊鍵用于不同的組件實體。
使用索引作為鍵是安全的有哪些例外？
- 如果您的串列是靜態的并且不會改變。
- 該串列永遠不會重新排序。
- 串列不會被過濾（從串列中添加/洗掉專案）。
- 串列中的專案沒有 ID。
如果您使用一些計數器或 ID 生成器在您的專案中設定一個可靠的密鑰，您的問題就會解決。
像這樣：
export default function App() {
const [list, setList] = useState([]);
const id = useRef({ counter: 0 });
const AddInput = () => {
console.log(id);
setList([...list, { placeholder: "Class Name", id: id.current.counter }]);
};
const DeleteInput = (id) => {
setList(list.filter((item, i) => item.id !== id));
};
const InputChangeHandler = (event, index) => {
const l = [...list];
l[index].value = event.target.value;
setList(l);
};
return (
<div>
<button onClick={AddInput}>Add</button>
{list.map((item, key) => (
<div key={item.id}>
<input
type={"text"}
id={key}
placeholder={item.placeholder}
onChange={(e) => InputChangeHandler(e, key)}
/>
<button id={item.id} onClick={() => DeleteInput(item.id)}>
Delete
</button>
</div>
))}
</div>
);
}
uj5u.com熱心網友回復：
使用過濾器。
const DeleteInput = (index) => {
const l = list.filter((_, i) => i !== index);
setList(l);
};
uj5u.com熱心網友回復：
將 id 傳遞給您的 DeleteInput 函式，對于洗掉，只需使用 id 過濾專案串列
const DeleteInput = (id) => {const filterItemList = list.filter((item) => item.id!== id);setList(filterItemList ); };
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399846.html
標籤：javascript 反应 反应钩子
下一篇：如何在React.js中創建延遲