Реагировать на крючки - Корзина - Правильное использование реквизита и прототипа? - PullRequest
Новая
       4

Реагировать на крючки - Корзина - Правильное использование реквизита и прототипа?

0 голосов
/ 06 мая 2020

Я пытаюсь создать пример корзины для покупок и наткнулся на этот пример, который, похоже, здесь не работает, но показывает каждый продукт, цену, кнопку добавления в корзину и правильно подсчитывает общую сумму, когда вы добавляете тележка.

ВОПРОСЫ

1) Вызовет ли использование concat каких-либо прототипных проблем, о которых я должен беспокоиться?

2) Что В чем смысл этой части кода? Почему они устанавливают props и children? Можно ли это пропустить или отредактировать без этого? 

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

CODE 

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>

1 Ответ

1 голос
/ 06 мая 2020

Будет ли использование concat вызывать какие-либо проблемы с прототипами, о которых мне следует беспокоиться?

Нет, Array.concat () просто вернет вам новый Ссылка на массив, которая также верна при установке состояния. И с чего бы возникла проблема с прототипом? Вы ничего не меняете по сравнению с прототипом.

В чем смысл выполнения этой части кода? Почему они устанавливают реквизиты и детей? 

const { product, children } = props;

Вам нужен продукт и дочерние элементы для отображения на странице продукта, вы просто извлекаете их из props. Этот способ извлечения переменных называется Уничтожение , то же, что: 

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