React中获取动态创建卡片点击名称，解决过多重渲染报错问题

问题1：父组件触发「太多重渲染」 #

你在给handleClick传参时直接写了onClick={handleClick(参数)}的格式，该写法会在组件渲染阶段直接执行函数，若函数内触发状态更新会引发无限重渲染循环，最终触发报错。

问题2：子组件批量打印卡片名称 #

你子组件内的事件绑定写法onClick={handleClick(e=>single?.flowName)}存在逻辑错误：

• 渲染阶段就会直接执行handleClick函数，而非点击时触发
• 传参逻辑完全错误，将箭头函数作为参数传给了handleClick，无法拿到正确的卡片名称

方案1：父组件处理点击事件（适合弹窗逻辑放在父组件的场景） #

父组件内定义点击回调，绑定事件时包一层箭头函数避免渲染时自动执行：

// 父组件内定义回调
const handleClick = (flowName) => {
  // 此处写弹窗逻辑，比如设置弹窗显示、绑定对应卡片数据
  console.log('当前点击卡片名称：', flowName)
}

// 渲染列表代码
{data.carData.map(single => (
  <li key={single.flowName}> {/* 必须给列表项加唯一key */}
    <div onClick={() => handleClick(single.flowName)}>
      <Card single={single}/>
    </div>
  </li>
))}

方案2：子组件内部处理点击事件（适合弹窗逻辑放在子组件的场景） #

修改Card组件的事件绑定和回调逻辑：

function Card({single}) {
  const [flowName, setFlowName] = useState();
  const handleClick = () => {
    const currentFlowName = single?.flowName
    setFlowName(currentFlowName)
    console.log("当前点击卡片名称:", currentFlowName);
    // 此处添加弹窗触发逻辑
  }

  return (
    {/* 绑定回调时只传函数引用，不要加()执行 */}
    <div className="main mb-2 z-0" onClick={handleClick} >
      <div  className=" inner_main_container pt-4 px-8 bg-white shadow-lg rounded-lg " >
          <div className="flex justify-between">
              <div className="flex flex-row align-center">
              </div>
                  {single?.badge.map(badge=>(
                      <div className={"badge"} key={badge}>
                      <span className={badge==="Growth"?" badgeClrG":(badge==="Content"?"content":"badgeClrO")} key={badge}>{badge}</span>
                      </div>
                  ))}
          </div>
          <div className="flex justify-center">
            <img src={single?.image} alt={single?.flowName} />
          </div>
          <div >
              <div className={"mt-2 flex justify-center"}>
                  <h1>{single?.flowName}</h1>
              </div>
          </div>
       </div>
       </div>            

  )   
}   
export default Card

• React事件绑定需要传入函数引用，不要直接加()执行函数，需要传参时包裹一层箭头函数即可
• 列表渲染必须给每个子项添加唯一key属性，避免React渲染异常

内容的提问来源于stack exchange，提问作者Muhammad Shah Sawar