如何更改更新useState数组中的对象

Question

假设我们在userInformation中有一个对象数组:

[
{
firstName:'Bob',
lastName:'Dude',
},
{
firstName:'John',
lastName:'Rad',
}
]

const [userInformation, setUserInformation] = useState([]);
userInformation.forEach((user, index) => {
if (snapshot.val().leadID === user.leadID) {
setUserInformation((userInformation) => ({
...userInformation,
[index]: snapshot.val(),
}));
}
});

我想更新第二个对象。

我的代码似乎不太正常。有什么建议吗?

Answer 1

我有一些建议给你:)

首先，您从未将用户信息分配给您的状态。所以应该在

下面

const [userInformation, setUserInformation] = useState(userinformation);

或者您必须从API获取用户信息并使用useEffect初始化它。

第二件事是你必须在每个用户上有一个id和index键像这样:

[
{
leadId:1,
firstName:'Bob',
lastName:'Dude',
index:1
},
{
leadId:2,
firstName:'John',
lastName:'Rad',
index:2
}
]

现在，回到您所期望的，您可以使用map()函数，一旦满足条件，您就更新特定的用户，否则在不满足条件时返回相同的用户。

const updatedUsers = userInformation.map((user, index) => {
if (snapshot.val().leadID === user.leadID) {
return setUserInformation((userInformation) => ({
...userInformation,
[index]: snapshot.val(),
}));
}
return userInformation;
});

Answer 2

这里我想一个简单的find()就可以了，而不是尝试循环数组。

const updateInfo = (id, obj /* snapshot.val() */) => {
const item = userInformation.find(({ leadID }) => leadID === id);
const updatedItem = {
...item,
...obj
};

setUserInformation((previousInfo) => {
...userInformation,
...updatedItem 
})
}

Answer 3

很抱歉我的问题中没有提供足够的信息。

我在React中使用firebase实时，没有将我的逻辑包装在useEffect中是一个问题。

我采用了这个解决方案:

setUserInformation(
userInformation.map((user) =>
user.leadID === snapshot.val().leadID
? {
...user,
...snapshot.val(),
}
: user
)
);

谢谢你的回答!