Question

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

那么如何在地图功能中添加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>
  }
))}

Answer 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>
    );
  }
}

Answer 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>);
))}

如果在地图内有箭头功能

2 个答案: