括号 {} 如何在 promise 对象的 react 中工作

Question

我正在使用简单的反应组件。这是代码。

      import React from 'react';
      export default class UserProfile extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            posts: [],
            name: 'ALok'
          }
        }

    componentDidMount()
    {
      fetch ('https://jsonplaceholder.typicode.com/users')
      .then (response => response.json())
      .then (res => this.setState({ posts : res}));

    }
    render() {
    return (
      <div>

        <h1>{this.state.posts.length}</h1>
      </div>
    )
    }
  }

此代码有效。但是如果我尝试在

添加多条指令

componentDidMount()
  {
    fetch ('https://jsonplaceholder.typicode.com/users')
    .then (response => response.json())
    .then (res => this.setState({ posts : res}));

像这样

componentDidMount() {
    fetch ('https://jsonplaceholder.typicode.com/users')
    .then (response =>  { 
        // adding multiple line 
        response.json(); 
        console.log ('Custom Log');
        })
    .then (res => this.setState({ posts : res}));
}

它停止工作。它给出了一个错误

Screen shot of the error in chrome

Answer 1

您需要 return 一个承诺作为承诺链的一部分。除此之外，{} 只是正常的 JS 作用域，在这种情况下是函数作用域。您正在隐式 returning undefined 并且在下一个 thenable 中被分配给 res 并保存到状态中。

componentDidMount() {
    fetch ('https://jsonplaceholder.typicode.com/users')
    .then (response =>  { 
        // adding multiple line
        console.log ('Custom Log');
        return response.json(); 
    })
    .then (res => this.setState({ posts : res}));
}

括号 {} 如何在 promise 对象的 react 中工作

How parentheis {} work in then of promise object in react

javascript

fetch

parentheses

promise

reactjs