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

Question

大家好，晚上好，

我在状态中设置了对象数组，我想更改数组中的一些对象。

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

    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 函数与事件处理程序或所需的其他函数或组件一起使用。

希望你能找到解决办法！

Answer 2

问题是 setter 方法（来自 useState 钩子）不像 class 组件中的 setState 那样将更改合并到现有状态。

通过使用 setter 的回调函数，您可以 previousState 将新更改合并到 return（在您的情况下，更改只是属性该州的第一项）。

这个也行。

   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

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

how to change value of object in array using setState with React

javascript

arrays

object

setstate

reactjs