reactjs - 为什么在处理 Promise 对象时大括号会提供未定义的数据？

Question

在一个从 API 获取响应的简单 React 应用程序中，以下带花括号的代码的结果数据值为 undefined。

fetch('http://localhost:8000/track/?id='+this.state.input)
            .then(res => {res.json()})        //Note Curly braces around {res.json()}
            .then((data) => {
                console.log(data);  

然而当花括号被移除时，令人惊讶的是它在控制台中获取并打印了响应数据。

fetch('http://localhost:8000/track/?id='+this.state.input)
            .then(res => res.json())         //No Curly braces - then works fine
            .then((data) => {
                console.log(data);

这种在 Promise 函数周围使用大括号的行为的原因是什么？不能使用花括号吗？为什么？不过，Promise 有点令人困惑。

Answer 1

当您使用箭头函数时，对于非常简单的函数，您可以省略大括号。这将隐式地返回箭头后面的表达式的结果。这最好用例子来解释。让我们从一个简单的函数开始:

var foo = () => {
  return 'bar';
}

这可以缩短为这一行:

var foo = () => { return 'bar' }

可以进一步缩短为(删除花括号和 return 语句):

var foo = () => 'bar';

在您的情况下，您可以认为您发布的代码是这样的:

.then(res => {
  res.json()
})

上面的函数没有返回任何东西，这是你问题的根源。你真正想要的是:

.then(res => {
  return res.json()
})

可以这样缩短:

.then(res => { return res.json() }) // one-liner with curlys
.then(res => res.json())            // without curlys