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

Question

我使用React，ES6并收到以下错误消息。 我从这里尝试了其他方法，但是对我不起作用。 如果删除“返回”，则会出现此错误：

错误不要将“新”用于副作用

如果我这样编码

const asyncValidate = (values, dispatch) => {
  const promise = new Promise(resolve, reject)
  promise()...

我无法访问构造函数的解析和拒绝。

---

短

如何使此代码正常工作？

const asyncValidate = (values, dispatch) => {
  return new Promise((resolve, reject) => {
    validation.availableUserEmail(values.email, dispatch)
    .catch(err => reject(err));
  });
};

错误围绕箭头主体arrow-body-style的意外阻止语句

Answer 1

如果您只有一个表达式，并且希望返回该表达式 ，则可以缩短箭头函数，因此，例如，如果您希望一个函数返回传入+ 1的数字，则这是简化版本： x => x + 1 。

new Promise(............)是单个表达式，您想返回它，因此可以（并且应该这样做，这是ESLint抱怨的原因）缩短它，如下所示：

(values, dispatch) =>
  new Promise(...........)

此外 ，由于validation.availableUserEmail()本身会返回Promise，因此您可以完全删除Promise构造函数（用Promise构造函数包装Promise是反模式），因此您可以简单地执行以下操作：

(values, dispatch) =>
  validation.availableUserEmail(.......)
    .catch(.........)