我正在尝试使用 useState 在反应钩子中更新 object 内的 object

Question

I'm trying to update object inside object in react hooks with useState .

When I create it's ok, but when I try to update only the count it's deleting the neighbors .

This is the console after create

{fish1: {…}} fish1: count: 1 neighbors: Array(1) 0: Array(3) 0: "fish3" 1: "fish6" 2: "fish7"

after the update

{fish1: {…}} fish1: count: 2

This is the code that create or update

if (fishProfile.name in fishDictionary) {
  setFishDictionary({
    ...fishDictionary,
    [fishProfile.name]: {
      count: fishDictionary[fishProfile.name].count+1
    }
  })
} else {
  setFishDictionary({
    ...fishDictionary,
    [fishProfile.name]: {
      count: 1,
      neighbors: [fishProfile.Neighbors]
    }
  })
}

Answer 1

 if(fishProfile.name in fishDictionary){
            setFishDictionary({...fishDictionary,[fishProfile.name]:{count:fishDictionary[fishProfile.name].count+1,neighbors:fishDictionary[fishProfile.name].neighbors } })
         }
        else
        {
        setFishDictionary({...fishDictionary,[fishProfile.name]:{count:1,neighbors:[fishProfile.Neighbors]}})
        }

Answer 2

You are mutating state and removing properties when updating the fishDictionary state. When updating React state it is necessary to shallow copy all state, and nested state, that is being updated.

setFishDictionary(fishDictionary => {
  if (fishProfile.name in fishDictionary) {
    return {
      ...fishDictionary,
      [fishProfile.name]: {
        ...fishDictionary[fishProfile.name], // <-- shallow copy
        count: fishDictionary[fishProfile.name].count + 1
      }
    };
  } else {
    return {
      ...fishDictionary,
      [fishProfile.name]: {
        count: 1,
        neighbors: [fishProfile.Neighbors]
      },
    };
  }
});