javascript - 在 React 应用启动时调用 API

Question

我在 React 应用程序中工作，在应用程序开始时，我需要向外部 API 发出 GET 请求，以提供一些设置，我还需要在用户登录和注销时进行此调用系统。目前我已经实现了，现在我不确定我应该在哪里调用它。

我有一个组件，里面有方法 ComponentWillReceiveProps 我正在调用请求，但是它调用了很多次，这不是我想要的。那么，哪种方法适合调用它呢？根据 API 的回答，某些组件将被渲染或不渲染。谢谢

Answer 1

我会在 componentDidMount 中调用外部 API，因为这是执行副作用的推荐位置 (source)。

一旦获得数据，就可以将其存储在组件状态(或 redux，如果有的话)中。然后根据状态决定在 render 方法中渲染什么。

例子:

class App extends React.Component {
  componentDidMount() {
    callExternalApi().then(data => {
      this.setState({
        data: data,
      });
    });
  }

  render() {
    const { data } = this.state;

    if (data === 'render div') {
      return <div />;
    }
    return <span />;
  }
}