更新状态为的对象内的数组

woobm2wo 于 2022-10-21 发布在其他

关注(0)|答案(2)|浏览(123)

我有一个像下面这样的班级

class Person {
    name: string;
    pets: Pet[]
}

另一个名为Pet的类

class Pet {
    name: string;
}

const [person, setPerson] = useState(new Person())

现在我必须更新Person类中的数组。它不能正常工作。要么就是没有更新。

setPerson({
...person,
      pets: [
         ...person.pets.slice(0,index),
         Object.assign({}, person.pets.items[index], updatedPet),
         ...person.pets.slice(index+1)
      ]
    });

如何更新数组或在数组中添加项。

next.js

来源：https://stackoverflow.com/questions/74137445/updating-array-inside-an-object-in-state

2条答案

按热度按时间

wgeznvg71#

在没有调试细节的情况下，很难判断是什么问题。useState挂钩中的对象经常忽略的重要一点是：Reaction仅在useState中的引用发生更改时才识别更改。如果您只需执行如下更新

person.pets.push(new Pet("my new pet"));

Reaction不会识别更改，因为它发生在Person对象内部的某个位置。对象本身仍与以前相同。
您需要更改实际引用。举个例子：

setPerson((person) => ({
  ...person,
  pets: [...person.pets, new Pet("my name")],
}));

我创建了一个相同的Stackblitz示例：https://stackblitz.com/edit/react-c4efbp?file=src%2FApp.js

赞(0）回复(0）举报 2022-10-21

ryoqjall2#

您可以使用setPerson方法来添加如下所示的新项。您也可以像这样更改现有的项目

setPersion(prev => {
    return (
        ...prev,
        pets: {
            ...prev.pets,
            newItem: you want to add,
            existingItem: you want to update
        }
    )
})

赞(0）回复(0）举报 2022-10-21

我来回答

更新状态为的对象内的数组

2条答案

相关问题

热门标签

最新问答