React组件map箭头函数内用if致编译失败的原因及解决方法

嘿，这个问题我刚入行React的时候也踩过坑！咱们先拆解问题，再给你几个靠谱的解决方案～

问题根源：箭头函数的隐式返回 vs 语句 #

你写的是隐式返回的箭头函数（箭头后面直接跟内容，没有用{}包裹函数体），但if是一个语句，不是表达式——React的JSX渲染上下文里只能放「能返回值的表达式」，直接把if塞进去，JS解析器根本不知道怎么处理，自然就编译失败了。

三种正确的写法 #

1. 改成显式返回的箭头函数（最直观） #

给箭头函数加上{}，把if逻辑放进去，符合条件时return对应的JSX，不符合就return null（React会自动忽略null的渲染）。另外别忘了给列表项加key，这是React列表渲染的硬性要求，不然会有性能警告：

{this.props.medication.map((object, i) => {
  if (object.med_type) {
    return (
      <div key={i}>
        <div className="col-sm-6 col-md-6">{object.item.description}</div>
        <div className="col-sm-6 col-md-6">
          {(object.med_assigneddate !== '' && object.med_assigneddate !== null) ? object.med_assigneddate : 'N/A'}
        </div>
      </div>
    );
  }
  return null;
})}

2. 用三元运算符替代if（简洁版） #

如果条件逻辑简单，用三元运算符（这是表达式）来替代if，保持隐式返回的简洁性：

{this.props.medication.map((object, i) => (
  object.med_type ? (
    <div key={i}>
      <div className="col-sm-6 col-md-6">{object.item.description}</div>
      <div className="col-sm-6 col-md-6">
        {(object.med_assigneddate !== '' && object.med_assigneddate !== null) ? object.med_assigneddate : 'N/A'}
      </div>
    </div>
  ) : null
))}

3. 先过滤再map（最优雅） #

如果你的条件只是过滤掉不需要渲染的项，推荐先对数组做filter，再对过滤后的结果做map——这样逻辑分离，代码可读性更高，map里只需要处理肯定要渲染的内容：

{this.props.medication
  .filter(object => object.med_type)
  .map((object, i) => (
    <div key={i}>
      <div className="col-sm-6 col-md-6">{object.item.description}</div>
      <div className="col-sm-6 col-md-6">
        {(object.med_assigneddate !== '' && object.med_assigneddate !== null) ? object.med_assigneddate : 'N/A'}
      </div>
    </div>
  ))}

小提醒 #

不管用哪种方法，key属性一定要加！最好用数据里的唯一标识（比如object.id），而不是索引i——如果数组项的顺序可能变化，用索引做key会导致React的diff算法出错，影响性能和渲染正确性。

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