setState 未正确更新 state

Question

I'm writing a function that adds sub varieties to an array of varieties ie each variety is an object having a property called varieties which is an array of objects also.

the initial varieties state is

const defaultInitVarieties = [];

const [varieties, setVarieties] = useState(defaultInitVarieties);

addInner is declared as:

const addInner = (newEntry, parentId) => {
console.log('running add inner');
//copy varieties
let copy = [...varieties];
// get parent via id
let parent = copy.find(each => each.id === parentId);
// get index of parent
const index = copy.findIndex(each => each.id === parentId);
//create new color variety
const newParent = {
  ...parent,
  varieties: [
    ...parent.varieties,
    {
      index: parent.varieties.length < 1 ? 0 : parent.varieties.length,
      edit: false,
      ...newEntry,
    }
  ]
};
//mutate copy
console.log('copy before', copy)
copy[index] = newParent;
console.log('copy after', copy);
//update state
setVarieties(copy);
};

PROBLEM

bearing in mind that varieties has one object in the array, the results of console.log('copy after', copy);is;

[{
   id: "31943632-0f91-419c-b6ee-55a3d92fdd28"
   imageUrl: "/static/media/choose-image.ba6e31d9.svg"
   size: "24"
   quantity: 1
   price: "2000"
   discountPrice: "2000"
   color: "red"
   varieties: [
    {
      index: 0
      edit: false
      id: "eb351fff-4216-4080-8cc2-31e677aa5b0e"
      imageUrl: "/static/media/choose-image.ba6e31d9.svg"
      size: "22"
      quantity: 1
      price: "2000"
      discountPrice: "2000"
      color: "red"
    }
   ]
  }]

which is what I expect.

However , when I setVariety with that what I get is

[{
  id: "31943632-0f91-419c-b6ee-55a3d92fdd28"
  imageUrl: "/static/media/choose-image.ba6e31d9.svg"
  size: "24"
  quantity: 1
  price: "2000"
  discountPrice: "2000"
  color: "red"
  varieties: []
},
{
  id: "eb351fff-4216-4080-8cc2-31e677aa5b0e"
  imageUrl: "/static/media/choose-image.ba6e31d9.svg"
  size: "22"
  quantity: 1
  price: "2000"
  discountPrice: "2000"
  color: "red"
  varieties: []
}]

ie the newEntry addition is added as another variety instead of it being a subvariety!

Answer 1

Try setVarieties(newParent); instead of setVarieties(copy); . If you want to see the expected change in console then change copy[index] = newParent; to copy = newParent; with this you won't need to change setVarieties(copy); statement.