如何使用 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