块语句围绕箭头正文错误与地图

Question

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

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

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

这将产生以下 lint 错误：

围绕箭头正文的意外块语句

Answer 1

有两种使用箭头函数的方法：

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

2-简洁的机身：() => (....) // implied "return"

---

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

喜欢这个：

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

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