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?4_547_PNG$",
    }]);

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

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>

Answer 2

你可以这样做。在该组件上将 method 作为 props 传递。

阅读更多关于 react components-and-props

const { useState, memo } = React;

const Parent = () => {
  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?4_547_PNG$"
    }
  ]);

  const increaseQuantity = (productId) => {
    const updateProducts = products.map((product) =>
      product.id === productId ? { ...product, qty: product.qty + 1 } : product
    );
    setProducts(updateProducts);
  };

  return (
    <div>
      {products.map((product) => (
        <Product
          key={product.id}
          {...product}
          increaseQuantity={increaseQuantity}
        />
      ))}
    </div>
  );
};

const Product = memo((props) => {
  const { id, title, qty, price, increaseQuantity } = props;
  return (
    <div>
      <p>Name : {title}</p>
      <p>Price : {price}</p>
      <button onClick={() => increaseQuantity(id)}>{qty}</button>
    </div>
  );
});

ReactDOM.render(<Parent />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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

How array of object update in React.useState?

reactjs

mern

react-hooks