reactjs - React.useState 中的对象数组如何更新？

Question

const [products, setProducts] = useState([
    {
      price: 999,
      title: "Watch",
      qty: 1,
      id: 1,
      img: "https://media.istockphoto.com/photos/military-style-watch-picture-id650233226?s=612x612",
    },
    {
      price: 20000,
      title: "Samsung F42",
      qty: 1,
      id: 2,
      img: "https://images.samsung.com/is/image/samsung/p6pim/in/sm-e426bzahins/gallery/in-galaxy-f42-5g-8gb-ram-sm-e426bzahins-514504593?$684_547_PNG$",
    }]);

我想通过 onClick 更新数量并通过组件 2 将此数据从组件 1 传递到组件 3。那么，setProducts 更新数量的语句将是什么。

标签： reactjsreact-hooksmern

Answer 1

将此函数与参数 Id 作为回调传递给 onClick

function increaseQuantity(Id){
  let res = products.map((obj) => obj.id === Id ? {...obj,qty:obj.qty+ 1} : obj)
  setProducts(res);
}

例子 -

<button onClick={() => increaseQuantity(item.id)}></button>