我有一個“串列”組件，它允許您將專案添加到狀態陣列，然后從狀態中顯示它。之后用戶可以洗掉這些串列項（或者應該能夠）。
這個組件中有四個狀態道具：
- currentList：輸入中要添加到串列陣列中的內容
- setCurrentList：用于更改輸入內容的內容
- fullList：完整的陣列串列
- setFullList：用于將currentList內容添加到陣列中，并移除
我正在使用 .filter() 創建狀態陣列的副本，然后在此函式中設定狀態：
const deleteFromList = (e) => {
console.log("Delete button pressed")
console.log(e)
let fullList = props.fullListState
let setFullList = props.setFullListState
let filteredArray = fullList.filter(item => item)
setFullList(filteredArray)
}
然而，每次我執行這個功能（即按下洗掉按鈕時），它只是創建一個回圈，前兩個console.logs只是重復完成。
這是完整的回傳函式本身：
<>
<label className="setup-jobs-label">{props.label}</label>
<div className="setup-jobs-input-container">
<input className="setup-jobs-alt-input" type="text" onChange={onChange} value={props.currentListState} />
<button className="setup-jobs-add-button" onClick={addToList}>Add</button>
</div>
{ props.fullListState === [] ? null : props.fullListState.map(x => {
return <div className="setup-jobs-input-container" key={props.fullListState[x]}>
<p className="setup-jobs-input-paragraph">{x}</p>
<button className="setup-jobs-delete-button" onClick={deleteFromList(x)}>Delete</button>
</div>
}) }
</>
重要的一點是底部條件渲染，它檢查狀態陣列是否為空，如果是，則不顯示任何內容。如果不是，則回傳 null。
任何建議將不勝感激 - 不確定我在過濾器功能中做錯了什么。
uj5u.com熱心網友回復：
在您的onClick處理程式中，您傳遞執行的結果deleteFromList，您應該傳遞對此函式的參考：
// note the '() =>'
<button className="setup-jobs-delete-button" onClick={() => deleteFromList(x)}>Delete</button>
有關這方面的更多詳細資訊，請參閱https://reactjs.org/docs/handling-events.html。
除此之外，您的過濾器邏輯似乎不正確：
// this line only removes falsy values, but not the "e" values
let filteredArray = fullList.filter(item => item)
// you should implement something like this
let filteredArray = fullList.filter(item => [item is not "e"])
// this should work as we work on objects references
let filteredArray = fullList.filter(item => item !== e)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/515651.html
標籤：反应
上一篇：如何在我的ReactJS應用程式中添加Wikipedia樣式參考？
下一篇：條件改變后如何使用鉤子重新渲染？