React hooks - 购物车 - 道具和原型的正确使用？

Question

我正在尝试构建一个购物车示例，但遇到了这个示例，它在这里似乎不起作用，但确实显示了每个产品、价格、添加到购物车按钮，并在您时正确地计算了总数添加到购物车。

问题

1) concat 的使用会导致我应该担心的任何原型问题吗？

2) 执行这部分代码的意义何在？他们为什么设置 props 和 children？没有这个可以省略或重构吗？

const Product = props => {
      const { product, children } = props;
      return (
        <div className="products">
          {product.name} ${product.price}
          {children}
        </div>
      );
    };

代码

const Product = props => {
  const { product, children } = props;
  return (
    <div className="products">
      {product.name} ${product.price}
      {children}
    </div>
  );
};

function App() {
  const [products] = useState([
    { name: "Superman Poster", price: 10 },
    { name: "Spider Poster", price: 20 },
    { name: "Bat Poster", price: 30 }
  ]);

  const [cart, setCart] = useState([]);

  const addToCart = index => {
    setCart(cart.concat(products[index]));
  };

  const calculatePrice = () => {
    return cart.reduce((price, product) => price + product.price, 0);
  };

  return (
    <div className="App">
      <h2>Shopping cart example using React Hooks</h2>
      <hr />
      {products.map((product, index) => (
        <Product key={index} product={product}>
          <button onClick={() => addToCart(index)}>Add to cart</button>
        </Product>
      ))}
      YOUR CART TOTAL: ${calculatePrice()}
      {cart.map((product, index) => (
        <Product key={index} product={product}>
          {" "}
        </Product>
      ))}
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Will the use of concat cause any prototypal issues that I should worry about?

不，Array.concat() 只是 return 一个新的数组引用，这在设置状态时也是正确的。为什么会有原型问题？您没有对原型进行任何更改。

What is the point of doing this part of the code? Why are they setting props and children?

const { product, children } = props;

你需要产品和children显示在你的产品页面，你只需从props中提取它，这种提取变量的方式称为Destructering，它与：

const product = props.product;
const children= props.children;

React hooks - 购物车 - 道具和原型的正确使用？

React hooks - Shopping cart - Proper use of props and prototype?

javascript

object

reactjs

use-state