我的反應應用程式中有一個 ToDo 組件和一個 Item 組件。我注意到，當我從 Item 組件觸發我的 onDelete 函式時，它只有 tdList 狀態變數處于我創建 item 組件時所處的狀態。為什么會發生這種情況，我該如何解決這個問題。
function ToDo() {
const [tdList, setTD] = useState([]);
const [item, setItem] = useState("");
const onDelete = (id) => {
// console.log(id);
console.log(tdList);
for(let i=0; i<tdList.length; i ){
if (tdList[i].props.id == id){
// setTD(tdList.splice(i, 1))
}
}
// setTD(tdList.splice())
};
const onHandleSubmit = (event) => {
event.preventDefault();
setTD([...tdList, (<Item id={itemsAdded} item={item} delete={onDelete} />)]);
setItem('');
// console.log(tdList);
itemsAdded ;
};
...more code...
uj5u.com熱心網友回復：
不要將 React 組件放入狀態。它打破了它們應該如何作業的自然順序，并且可能使撰寫的控制流非常難以理解。相反，在 state 中，只放入稍后創建 React 組件所需的值- 當從組件回傳時，從該狀態創建組件。
對于您的代碼，您可以執行以下操作：
const [lastIdUsed, setLastIdUsed] = useState(-1); // use this instead of reassigning a non-React itemsAdded variable
const [tdData, setTdData] = useState([]);
const onDelete = (id) => {
// use `.filter`, not `.splice` in React - don't mutate state
setTdData(tdData.filter(tdItem => tdItem.id !== id));
};
const onHandleSubmit = (event) => {
event.preventDefault();
setTdData([...tdData, { id: lastIdUsed 1, item }]);
setItem('');
setLastIdUsed(lastIdUsed 1);
};
const tds = tdData.map(
tdItem => <Item id={tdItem.id} item={tdItem.item} delete={onDelete} />
);
然后使用tds, 回傳它們或將它們插入到 JSX 中。
僅在您要退回組件之前創建組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/508887.html
標籤：javascript反应