React使用MUI Tabs按serviceType筛选后结果无法渲染如何解决

核心错误点 #

• 外层pros.map的非All分支没有返回值：你调用了pro.services.filter方法，但没有把任何结果return给外层的map，React无法获取需要渲染的元素。
• 误用了filter方法：filter的作用是返回布尔值过滤数组，你在filter回调中返回JSX是无效操作，filter最终返回的是符合条件的service对象数组，不是可渲染的JSX数组。
• 存在重复渲染风险：如果同一个专业人员有多个符合筛选条件的service，你的原有逻辑会重复生成同一张卡片。

修复方案 #

推荐先做数据筛选再渲染，逻辑更清晰不易出错：

步骤1：提前筛选符合条件的专业人员 #

// 在渲染前先处理筛选逻辑
const filteredPros = value === 'All' 
  ? pros 
  : pros.filter(pro => 
      // 只要存在任意一个符合条件的service就保留该专业人员
      pro.services.some(service => 
        service.serviceType.toLowerCase() === value.toLowerCase()
      )
    )

步骤2：遍历筛选后的数据渲染卡片 #

{filteredPros.length > 0 && filteredPros.map(pro => (
  <Grid item xs={12} md={6} key={pro.email} style={{padding: 5}}>
    <FavoriteProCard pro={pro}/>
  </Grid>
))}

原有逻辑的快速修复 #

如果你不想调整现有结构，只要补上缺少的return、修正filter的使用即可：

{pros.length > 0 && pros.map(pro => {
  if(value === 'All'){
    return(
      <Grid item xs={12} md={6} key={pro.email} style={{padding: 5}}>
        <FavoriteProCard pro={pro}/>
      </Grid>
    )
  } else {
    const hasMatchedService = pro.services.some(service => {
      const serviceType = service.serviceType
      return serviceType.toLowerCase() === value.toLowerCase()
    })
    if(hasMatchedService) {
      console.log(pro.name)
      return (
        <Grid item xs={12} md={6} key={pro.email} style={{padding: 5}}>
          <FavoriteProCard pro={pro}/>
        </Grid>
      )
    }
    // 无匹配项时返回null
    return null
  }
})}

为什么能打印却无法渲染 #

filter的回调函数会正常执行，所以你写的console.log会触发，但你没有把生成的JSX元素返回到外层map的返回值中，React没有接收到要渲染的元素，自然不会生成卡片。

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