Question

在初始状态下，我设置了loading: false。在渲染方法中，我的逻辑是当state.loading为true时，显示Loading，否则显示另一件事。在我的componentDidMount方法中，我将状态更改为loading: true。

为什么在初始状态下加载设置为false，为什么浏览器中会显示Loading？

class App extends Component {
   constructor() {
     super();
     this.state = {
       loading: false,
       character: {}
     };
   }

  componentDidMount() {
    this.setState({ loading: true });
    fetch('https://swapi.co/api/people/1').then((res) => res.json()).then((data) => {
      this.setState({
        loading: false,
        character: data
      });
    });
  }

  render() {
    return (
      <div>
        <p>{this.state.loading ? 'Loading' : this.state.character.name}</p>
      </div>
    );
  }
}

Answer 1

componentDidMount不能在render之前调用。

componentDidMount在安装组件时被调用，在最初render调用之后立即被调用。

this.setState({ loading: true })被设置为组件安装，结果将立即显示。

Answer 2

只需添加500ms或1000ms延迟。

 setTimeout(function () {
      this.setState({loading: false});
 }.bind(this), 1000);

componentDidMount（）在render（）方法之前呈现

2 个答案: