[Bug]: The solution to the state-related challenges on the webpage appear to be incorrect.

Mở trang Updating Arrays in State và tái hiện Challenge 2 bằng ví dụ App.js được cung cấp, đồng thời so sánh đầu ra của console với các số đếm được render. Xác định xem giải pháp hay phần giải thích của giải pháp có không chính xác hay không; hoàn thành khi challenge được ghi lại tạo ra state và các kết quả hiển thị nhất quán.

Summary

In the documentation on the 'Learn' page, under the section 'Updating Arrays in State,' the solution for Challenge 2 appears to have a bug.

When using console.log to debug the solution, the counts in the product array do not match what is displayed on the screen.

Page

https://react.dev/learn/updating-arrays-in-state

Details

"According to the solution's description, when the '+' button is pressed, the count value in the initialProducts array should increment. However, logging the values to the console shows that the values on the screen differ from those in the array."

Solution with 2 extra lines for logging (App.js):

import { useState } from 'react';

const initialProducts = [{
  id: 0,
  name: 'Baklava',
  count: 1,
}, {
  id: 1,
  name: 'Cheese',
  count: 5,
}, {
  id: 2,
  name: 'Spaghetti',
  count: 2,
}];

export default function ShoppingCart() {
  const [
    products,
    setProducts
  ] = useState(initialProducts)

  function handleIncreaseClick(productId) {
    setProducts(products.map(product => {
      if (product.id === productId) {
        return {
          ...product,
          count: product.count + 1
        };
      } else {
        return product;
      }
    }))
    // Next 2 lines are not parts of the solution.
    // They were added to test the result.
    console.log(initialProducts)
    console.log(products)

  }

  function handleDecreaseClick(productId) {
    let nextProducts = products.map(product => {
      if (product.id === productId) {
        return {
          ...product,
          count: product.count - 1
        };
      } else {
        return product;
      }
    });
    nextProducts = nextProducts.filter(p =>
      p.count > 0
    );
    setProducts(nextProducts)
  }

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>
          {product.name}
          {' '}
          (<b>{product.count}</b>)
          <button onClick={() => {
            handleIncreaseClick(product.id);
          }}>
            +
          </button>
          <button onClick={() => {
            handleDecreaseClick(product.id);
          }}>
            –
          </button>
        </li>
      ))}
    </ul>
  );
}