使用 useState() 修改对象数组

Question

I have an array of objects and when my component mounts I want to modify a property on the objects in the array.

For context: I am loading a component, waiting for the images to load, then i get the image dimensions and then i figure out the aspect ratio and change that value in the array.

Here is some reduced code for readability:

let itemsOriginal = [
  {
    id: 1, 
    src: "<img-src>",
    aspectRatio: null
  },
  {
    id: 2, 
    src: "<img-src>",
    aspectRatio: null
  },
  {
    id: 3, 
    src: "<img-src>",
    aspectRatio: null
  }
];

const [items, setArr] = useState(itemsOriginal);

useEffect(() => {
  
  // figure out aspect ratio
  // then try and set that value to obj property in array

  setArr(
    items.map((item, index) => {
      item.aspectRatio === null 
        ? {...item, aspectRatio: "changed"} // <<< how do i get item.aspectRatio to update ???
      : '' 
    }
  ))
})

Answer 1

You can do,

  const update = () => {
    const itemsClone = [...items];
    itemsClone.forEach((p) => {
      p.aspectRatio = 'new value';
    });
    setArr(itemsClone);
  };