如何更改更新 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

在这里，我认为一个简单的find()可以解决问题，而不是尝试循环数组。

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

Answer 2

是的，我对你有一些建议:)

首先，您从未将用户信息分配给您的州。 所以它应该像下面这样

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()函数，一旦满足条件，您就更新该特定user ，否则您应该在不满足条件时返回相同的用户。

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

Answer 3

抱歉，我的问题中缺少提供的信息。

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

我采用了这个解决方案：

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

感谢您的所有回答！