onClick 触发页面刷新并将 useParams 挂钩中的页面参数设置为“未定义”

Question

我有一个有趣的问题。我有一个产品页面和一个“添加项目”按钮。单击按钮时，“items”数组状态变量中的产品 ID 将会更新。我使用“useParams”挂钩从 url 参数获取产品 ID。

现在事情是这样的。我将日志语句放在代码中的不同步骤中，发现当我从主页导航到产品页面时，页面 url 参数（即产品 ID）已正确存储和记录。

但是当我单击“添加项目”按钮时，它似乎立即重新渲染页面，然后将 useParams 挂钩中的 url 参数（之前保存了正确的页面 id）设置为“未定义”，然后将其设置为“未定义”将“items”状态变量更新为“未定义”。

这是代码：

import { useParams, Link } from "react-router-dom";
import { useState } from 'react';


function AddToCart() {
  const [items, setItems] = useState([]);
  const { id } = useParams();
  console.log(id);

  function addItem() {
    setItems([...items, id]);
  }

  console.log(items);

    return ( 
        <div className='add-to-cart'>
          <button className='add-btn' onClick={() => addItem()}>Add Item</button>
          {/* <Link to={`cart/${items}`}><FontAwesomeIcon className='cart-btn' icon={faBasketShopping} size='3x' /></Link> */}
        </div>
    );
}

export default AddToCart;

我在 Google 上查找并尝试了功能块内的 e.preventDefault() 方法，但这也不起作用。我该如何解决这个问题？

添加单击按钮之前和之后控制台的屏幕截图

Answer 1

错误原因

setState是一个异步处理函数。

因此，当您将项目打印到控制台时，尚未更新的状态将打印到控制台。看来是这个原因。

错误解决方法

让我们使用 useEffect 来处理异步处理。

  useEffect(() => {
    console.log('Updated items:', items);
  }, [items]);

  function addItem() {
    setItems(prevItems => [...prevItems, id]);
  }