使用地图围绕箭头主体错误的块语句

【问题标题】：block statement surrounding arrow body error with map使用地图围绕箭头主体错误的块语句
【发布时间】：2017-08-31 04:58:02
【问题描述】：

我知道之前有人问过这个问题，但在我目前的情况下，我无法弄清楚 linter 想要的语法。

我知道我需要删除块语句括号，但无法弄清楚如何重构以使其工作并通过 lint：

return (
  <div>
    {
      paymentSchedule.map((payment) => {
        return (
            <div>{payment.description}</div>
        );
      })
    }
  </div>
);

这会产生以下 lint 错误：

箭头主体周围出现意外的块语句

【问题讨论】：

标签： reactjs arrow-functions

【解决方案1】：

箭头函数有两种使用方式：

1- 块体：() => { /*other logic*/ return(....)}

2-简洁正文：() => (....) // implied "return"

在您的情况下不需要块体，因为您只想返回 div 而无需任何其他逻辑或计算，因此直接使用简洁的主体。

像这样：

return (
    <div>
      {
         paymentSchedule.map(payment => <div key={payment.description}>{payment.description}</div> )
      }
    </div>
);

建议：为每个元素分配唯一键，否则也会抛出警告。

【讨论】：