Gatsby项目中按条件动态渲染UpcomingEvent组件数据问题求助

核心问题原因 #

你当前代码存在变量冲突问题：你导入的UpcomingEvent是React组件，你错误地将这个组件本身当做活动数据来做判断、传参，没有先从传入的events数组中筛选出upcomingEvent为true的活动数据。

具体修改步骤 #

1. 筛选即将开始的活动数据
   在EventsContainer组件开头，新增代码筛选符合要求的活动数据，注意变量名不要和导入的组件重名：

const EventsContainer = ({ events }) => {
  const classes = useStyles()
  // 新增：筛选upcomingEvent为true的活动，默认值为null
  const upcomingEventData = events.find(({ node }) => node.upcomingEvent)?.node || null
  // 原有代码...
}

2. 替换所有错误引用
   把组件中所有用来做判断、传参的UpcomingEvent全部替换为上面定义的upcomingEventData，比如：

• 类名判断：upcomingEventData ? classes.upcomingShowMobileUpcomingEvent : classes.upcomingShowMobile
• 组件渲染：

{upcomingEventData && (
  <UpcomingEvent
    // 可以直接解构传参，不用逐个写属性
    {...upcomingEventData}
  />
)}

3. 补全GraphQL查询字段
   你当前events.js的GraphQL查询没有包含UpcomingEvent组件需要的description字段，同时EventCard用到的title字段也缺失，需要补全：

query {
  allEventsJson {
    edges {
      node {
        month
        day
        name
        time
        location
        upcomingEvent
        description # 补全UpcomingEvent需要的字段
        title # 补全EventCard需要的字段
      }
    }
  }
}

4. 补全缺失的资源导入
   你当前EventsContainer中使用的EventsHeroImageMobile、UpcomingShowFlyerMobile、EventsHeroImage等图片资源没有导入，需要在组件开头补上对应的import语句。

可选优化 #

如果存在多个即将开始的活动需要渲染，把find方法换成filter，再用map遍历渲染即可：

const upcomingEventsList = events.filter(({ node }) => node.upcomingEvent)
// 渲染时
{upcomingEventsList.map(({ node }, i) => (
  <UpcomingEvent key={i} {...node} />
))}

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