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

感謝您的所有回答！