大家晚上好，
我在 state 中設定了物件陣列，我想更改陣列中的某個物件。
所以這是我的陣列我們你可以看到：
const [CategoriesArr, setCategoriesArr] = useState([
{
image: anime,
nameByCategories: "Aninate",
allCard: [
silverCard, blackCard
],
},
{
image: vacation,
nameByCategories: "Vacation",
allCard: [
blackCard, silverCard
],
},])
我試圖將其更改allCard為：allCard:blackCard, blackCard
用這種方式：
setCategoriesArr([
{
...CategoriesArr[0],
allCard: [
silverCard, silverCard
]
}])
問題是在 setState 之后，我得到了帶有我想要的更改的新陣列以及最后一個陣列，所以它的意思是這樣的
{
image: anime,
nameByCategories: "Aninate",
allCard: [
blackCard, blackCard
],
},
{
image: vacation,
nameByCategories: "Aninate",
allCard: [
silverCard, blackCard
],
},
{
image: anime,
nameByCategories: "vacations",
allCard: [
blackCard, silverCard
],
},
我想知道我可以得到完全像這樣的新陣列：
const [CategoriesArr, setCategoriesArr] = useState([
{
image: anime,
nameByCategories: "Aninate",
allCard: [
silverCard, blackCard
],
},
{
image: vacation,
nameByCategories: "Vacation",
allCard: [
blackCard, blackCard
],
},])
請求。
我希望你們能幫助我:)
uj5u.com熱心網友回復：
有一種簡單的方法可以做到。
const updateCategoryList = (id) => {
const newCategories = CategoriesArr.map(cate => {
if (cate.nameByCategories === id) { // <= id can be "Aninate" or anything you want
cate.allCard[silverCard, silverCard]
return cate;
}
})
setCategoriesArr(newCategories)
}
您可以將此 updateCategory 函式與事件處理程式或您想要的其他函式或組件一起使用。
我希望你能找到解決辦法！
uj5u.com熱心網友回復：
問題是 setter 方法（來自useStatehook）setState與將更改合并到現有狀態的類組件中不同。
通過使用 setter 的回呼函式，您previousState可以將新更改合并到并回傳（在您的情況下，更改只是狀態中第一項的屬性）。
這個也行。
setCategoriesArr((prevValue) => {
return prevValue.map((item, itemIndex) => {
if (itemIndex === 0) {
return { ...item, allCard: ["silverCard", "silverCard"] };
} else {
return item;
}
});
});
代碼沙箱 => https://codesandbox.io/s/runtime-shadow-2bbxh?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395634.html
標籤：javascript 数组 反应 目的 设置状态
上一篇：是否有一項功能允許我在另一個np陣列中回傳所需np陣列的索引
下一篇：如何過濾一組數字并取一定的間隔？