如何使用 setState 和 React 更改数组中对象的值答案

【问题标题】：how to change value of object in array using setState with React如何使用 setState 和 React 更改数组中对象的值
【发布时间】：2021-12-26 15:48:14
【问题描述】：

大家晚上好，

我有一组处于状态的对象，我想更改数组中的一些对象。

所以这是我的数组，你可以看到：

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

请。

我希望你们能帮助我:)

【问题讨论】：

标签： javascript arrays reactjs object setstate

【解决方案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 函数与事件处理程序或您想要的其他函数或组件一起使用。

希望你能找到解决办法！

【讨论】：

【解决方案2】：

问题在于 setter 方法（来自 useState 钩子）不像 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

【讨论】：