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

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>
  );
}

打开 Updating Arrays in State 页面，使用提供的 App.js 示例重现 Challenge 2，并将控制台输出与渲染出的计数进行比较。确定解决方案或其解释是否不正确；当文档中的 challenge 产生一致的状态和显示结果时，即表示完成。