我目前正在嘗試在用戶點擊按鈕時存盤附加到網站上的按鈕的資料。我正在使用 onClick 函式來獲取從按鈕傳入的資料，并嘗試將其設定為狀態。我遇到的問題；然而，無論出于何種原因，狀態值都沒有更新，它仍然是一個空陣列。 如果物件存在于陣列中，我想要的結果，更新它。如果沒有，則追加到陣列中。任何關于為什么狀態沒有正確更新的指導將不勝感激。我的代碼如下：
import { useState } from "react";
export default function App() {
const [formData, setFormData] = useState([]);
const data = [
{ name: "test1", id: 1, isActive: false },
{ name: "test2", id: 2, isActive: false }
];
const handleClick = (item) => {
setFormData(
(formData) =>
formData.map((res) =>
res?.id === item.id
? { ...res, checked: !res.isActive }
: { ...item, checked: !item.isActive }
)
);
};
return (
<div className="App">
{data.map((item) => {
return <button onClick={() => handleClick(item)}>{item.name}</button>;
})}
</div>
);
}
附上一個用于除錯的代碼沙箱：https : //codesandbox.io/s/peaceful-sun-20ec0?file=/ src/App.js: 0-681
uj5u.com熱心網友回復：
我認為主要問題是您正在初始化formData為一個空陣列。這使得map呼叫formDatainhandleClick什么都不做，因為在空陣列上呼叫 map 不會在任何元素上呼叫 map 函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351789.html
標籤：javascript 反应