React组件间传递按钮ID时出现undefined问题求助

问题重现 #

尝试将ProductList.js中按钮的id传递给Cart.js组件时，首次点击按钮，Cart.js内console.log(pid)输出undefined，再次点击才能显示正确的id。

问题原因 #

React的setState是异步执行的状态更新操作：调用setPid(pid)后，组件状态不会立即更新，Props的传递也存在延迟。你在调用setPid后立刻执行cartRef.current.btnClick()，此时Cart组件还未接收到更新后的pid值，所以首次点击拿到的是初始状态的undefined。

另外，代码里直接修改state变量pid = e.target.id的操作不符合React状态管理规范，状态必须通过setter方法修改，这个赋值是冗余且错误的。

解决方案 #

直接将当前按钮的id作为参数传递给Cart组件的btnClick方法，跳过状态更新的异步等待，同时修正状态更新的写法：

修改ProductList.js的btnID函数 #

function btnID(e) {
  const currentPid = e.target.id;
  setPid(currentPid); // 仅用于后续可能的状态依赖，不直接依赖它传递id
  cartRef.current.btnClick(currentPid);   
}

修改Cart.js的相关逻辑 #

import { useState, forwardRef, useImperativeHandle } from "react"

const Cart = ({pid}, ref) => {
    const [count, setCount] = useState(0)

    useImperativeHandle(ref, () => ({
        btnClick: (currentPid) => btnClick(currentPid)
    }))

    function btnClick(currentPid) {
        console.log(currentPid); // 首次点击即可拿到正确id
        // 用函数式更新获取最新count值，避免闭包导致的计数错误
        setCount(prevCount => prevCount + 1 )
    }
         
    return (
        <div className="container">
            <button className="btn btn-outline-primary" style={{float:"right", display:"inline-block"}}>Cart ({count})</button>
        </div>
    )
}

export default forwardRef(Cart)

额外优化建议 #

• 移除ProductList中直接修改state变量的代码pid = e.target.id，React状态只能通过setter方法更新
• 计数更新时使用函数式更新setCount(prevCount => prevCount +1)，确保每次都基于最新的状态值计算，避免快速点击时的计数偏差

内容的提问来源于stack exchange，提问作者wokoma osborn