如何使用 setState 和 React 更改數組中 object 的值

Question

大家好，晚上好，

我在 state 中設置了 object 數組，我想更改數組中的一些 object。

所以這是我的數組，你可以看到：

    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
    ],
},])

懇求。

我希望你們能幫助我:)

Answer 1

有一種簡單的方法可以做到這一點。

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 function 與事件處理程序或您想要的其他功能或組件一起使用。

我希望你能找到解決辦法！

Answer 2

問題是 setter 方法（來自useState掛鈎）與 class 組件中的setState不同，后者將更改合並到現有 state。

通過使用設置器的回調 function 為您提供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