取出动态创建的卡片的名称反应答案

【问题标题】：take out name of dynamically created cards react取出动态创建的卡片的名称反应
【发布时间】：2021-11-24 16:46:16
【问题描述】：

我从一组对象创建了一些卡片，现在我想以不同方式显示每张卡片的弹出数据。这是我的打印代码

{data.carData.map( single=>(<li>{ <div  onClick={handleClick}><Card single={single}/></div>} </li>))}

为此，我想要卡片名称 onClick 事件，但是当我在 handleClick 反应中传递任何内容时，会引发重新渲染过多的错误。

如果我在卡片组件中执行相同的 onClick 事件并记录它会一一打印所有卡片名称这是卡片里面的内容：

 function Card({single}) {
const [flowName, setflowName] = useState();
const handleClick=(e)=>{
    setflowName(e);
    return
}
console.log("loging name:",flowName);
return (
         <div className="main mb-2 z-0" onClick={handleClick(e=>single?.flowName)} >
       <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

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案1】：

我怀疑您在尝试传递值时正在这样做：

single=>(<li>{ <div  onClick={handleClick(value)}><Card single={single}/></div>} </li>))}

每次渲染时，都会立即调用该函数，这会导致另一个渲染等等......

解决方案是将您的 handleClick 调用包装在另一个函数中：

single=>(<li>{ <div  onClick={()=>handleClick(value)}><Card single={single}/></div>} </li>))}

【讨论】：