IF 在地图箭头函数内答案

【问题标题】：IF inside a map arrow functionIF 在地图箭头函数内
【发布时间】：2018-04-24 18:38:30
【问题描述】：

为什么这个例子中的 if 会导致我的 react 组件无法编译。

那么如何在 map 函数中添加这样的 if 呢？

{this.props.medication.map((object, i) => (
  if(object.med_type){
    <div>
      <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>
  }
))}

【问题讨论】：

因为object.med_type 是假的？
你可能想真正return那个表达式，而不是什么都不做。
试试object && object.med_type && <div...

标签： javascript reactjs

【解决方案1】：

箭头函数在=> 符号的右侧可以有：

一个块
声明（前面有一个隐含的return）

如果你想要一个带有自己块的 if 语句，你需要将函数体写成一个块，并显式包含 return 语句。

(object, i) => {
  if (object.med_type) {
    return (
      <div>
        <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>
    );
  }
}

【讨论】：

【解决方案2】：

最好先filter，然后使用map。你必须return 来自map 范围的东西。示例：

{this.props.medication.filter(object => (object.med_type)).map((object, i) => (
    return (
      <div>
        <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>);
))}

【讨论】：