React映射事件对象并传方法给子组件时渲染失效问题排查

原本Home.js可正常将event映射到SingleEvent子组件并渲染，修改代码传递addSafedId方法后，组件无法渲染且无报错。以下是新旧代码：

旧版代码 #

Home.js #

return (
        <>
          {props?.events
            ? 
            props.events.map((event) => SingleEvent(event))
            : <></>}
        </>
    );

SingleEvent.js #

return (
    <div className={styles["container"]}>
        <div className={styles['pictureFrame']}>
          {typeof props.flyerFront !== 'undefined' > 0 ? 
          <img className={styles['picture']} src={props.flyerFront} alt="new"  />
          : 
          <img className={styles['picture']} src={cal}  />}
        </div>
        <div className={styles['name']}>{props.title}</div>
        <div className={styles['date']}>| Date: {props.date}</div>
        <div className={styles['plus']}>
          <img src={plus} onClick={handleClick} />
        </div>
    </div>
  )

新版代码 #

Home.js #

export const Home = (props) => {
    console.log(props.events)
    
    function addSafedId (id){
        console.warn("twice")
        props.addSafedId(id);
    }

    return (
        <>
          {props?.events
            ? 
            props.events.map((event) => {
                <SingleEvent event={event} add={addSafedId} />
            }
            )
            : <></>}
        </>
    );
}

SingleEvent.js #

return (
    <div className={styles["container"]}>
        <div className={styles['pictureFrame']}>
          {typeof props.event.flyerFront !== 'undefined' > 0 ? 
          <img className={styles['picture']} src={props.event.flyerFront} alt="new"  />
          : 
          <img className={styles['picture']} src={cal}  />}
        </div>
        <div className={styles['name']}>{props.event.title}</div>
        <div className={styles['date']}>| Date: {props.event.date}</div>
        <div className={styles['plus']}>
          <img src={plus} onClick={handleClick} />
        </div>
    </div>
  )

解决方法 #

1. 修复map函数的返回值问题 #

新版Home.js中，map的箭头函数使用大括号{}但未显式返回组件，导致map返回一组undefined，无法渲染内容。修改方式二选一：

• 去掉大括号，使用隐式返回：

props.events.map((event) => <SingleEvent event={event} add={addSafedId} />)

• 保留大括号，添加return关键字：

props.events.map((event) => {
    return <SingleEvent event={event} add={addSafedId} />
})

2. 完善SingleEvent的点击事件逻辑 #

SingleEvent中的handleClick未调用传递的add方法，需补充实现：

// 在SingleEvent组件内定义handleClick
const handleClick = () => {
    props.add(props.event.id); // 假设event对象有id属性，根据实际结构调整
};

3. 修复条件判断逻辑错误 #

typeof props.event.flyerFront !== 'undefined' > 0的判断逻辑有误，布尔值与0比较结果永远为false，应直接判断值是否存在：

{props.event.flyerFront ? 
    <img className={styles['picture']} src={props.event.flyerFront} alt="new"  />
    : 
    <img className={styles['picture']} src={cal}  />}

或更严谨的写法：

{typeof props.event.flyerFront !== 'undefined' && props.event.flyerFront ? 
    <img className={styles['picture']} src={props.event.flyerFront} alt="new"  />
    : 
    <img className={styles['picture']} src={cal}  />}

4. 为map添加key属性 #

React列表渲染需为每个子元素添加唯一key，避免性能问题和警告：

props.events.map((event) => (
    <SingleEvent 
        key={event.id} // 使用event的唯一标识，如id，无id可使用索引（不推荐）
        event={event} 
        add={addSafedId} 
    />
))

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