我目前正在構建一個組件，它有幾個方面。它允許您將專案串列添加到陣列并動態顯示它。然后，它允許您通過單擊特定的“洗掉”按鈕來洗掉專案。
結果，我的組件中有四個狀態道具：
- 當前串列：用于決定將哪些內容添加到完整串列陣列中
- 設定當前串列
- 完整串列：完整的陣列
- 設定完整串列
但是，如果陣列中有兩個或多個相同的值，當您單擊其中一個的洗掉按鈕時，它會同時洗掉這兩個值。
這是因為我只是在我的過濾器函式中進行檢查，以確保傳遞給它的專案等于傳遞給整個函式的值：
const deleteFromList = (e) => {
let fullList = props.fullListState
let setFullList = props.setFullListState
let filteredArray = fullList.filter(item => item !== e)
setFullList(filteredArray)
}
我需要更改“filteredArray”變數，以便它檢查專案的其他一些屬性（可能是陣列中專案的索引？）或添加另一個簽入。
雖然在這里我無法找出最好的方法。有沒有人有什么建議？
這是完整的組件供參考：
const FormListInput = (props) => {
const onChange = (e) => {
props.setCurrentListState(e.target.value)
}
const addToList = () => {
let setFullList = props.setFullListState
let current = props.currentListState
let setCurrent = props.setCurrentListState
setFullList(full => [...full, current])
setCurrent('')
}
const deleteFromList = (e) => {
let fullList = props.fullListState
let setFullList = props.setFullListState
let filteredArray = fullList.filter(item => item !== e)
setFullList(filteredArray)
}
return (
<>
<label className="form-list-label">{props.label}</label>
<div className="form-list-input-container">
<input className="form-list-input" type="text" onChange={onChange} value={props.currentListState} />
<button className="form-list-add-button" onClick={addToList}>Add</button>
</div>
{ props.fullListState.length === 0 ? null : props.fullListState.map(x => {
return <div className="form-list-input-container" key={props.fullListState[x]}>
<p className="form-list-input-paragraph">{x}</p>
<button className="form-list-delete-button" onClick={() => deleteFromList(x)}>Delete</button>
</div>
}) }
</>
)
}
uj5u.com熱心網友回復：
在這種情況下，您應該按索引洗掉那些選定的專案。
它會在每次洗掉后重新渲染整個串列，因此您不必擔心之后會出現索引沖突。
const FormListInput = (props) => {
const onChange = (e) => {
props.setCurrentListState(e.target.value)
}
const addToList = () => {
let setFullList = props.setFullListState
let current = props.currentListState
let setCurrent = props.setCurrentListState
setFullList(full => [...full, current])
setCurrent('')
}
const deleteFromList = (index) => {
let fullList = props.fullListState
let setFullList = props.setFullListState
let filteredArray = fullList.filter((item, currentIndex) => currentIndex !== index)
setFullList(filteredArray)
}
return (
<>
<label className="form-list-label">{props.label}</label>
<div className="form-list-input-container">
<input className="form-list-input" type="text" onChange={onChange} value={props.currentListState} />
<button className="form-list-add-button" onClick={addToList}>Add</button>
</div>
{ props.fullListState.length === 0 ? null : props.fullListState.map((x, index) => {
return <div className="form-list-input-container" key={props.fullListState[x]}>
<p className="form-list-input-paragraph">{x}</p>
<button className="form-list-delete-button" onClick={() => deleteFromList(index)}>Delete</button>
</div>
}) }
</>
)
}
uj5u.com熱心網友回復：
你的物品有id嗎？這是最常見的檢查方式，因為它應該始終是唯一的。然后你可以這樣做：
let filteredArray = fullList.filter(item => item.id !== e.id)
uj5u.com熱心網友回復：
我假設您的串列是一個字串陣列，在這種情況下，不是將事件傳遞給 deleteFromList，而是傳遞專案的索引。
此外，您為每個元素設定了不正確的鍵。由于您需要確保鍵是唯一的，并且您還說條目可以重復，并且如果條目只是一個字串并且沒有 id，那么我們將不得不從例如字串值創建鍵元素和索引。
我在代碼沙箱中創建了您的代碼的作業示例 作為參考
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/515647.html
標籤：反应
上一篇：如何一次更改多個正方形顏色？