在React app start上调用API

Question

我正在使用React应用程序,在应用程序启动时我需要向外部API发出GET请求,这给我一些设置,这个调用我需要在用户登录和注销系统时也能这样做.目前我已经实现了,现在我不知道我应该在哪里调用它.

我有一个组件,我在里面ComponentWillReceiveProps有我调用请求的方法,但是它调用很多次,这不是我想要的.那么,哪种方法适当称之为呢？取决于API的答案,将呈现或不呈现一些组件.谢谢

Answer 1

我会调用外部API componentDidMount,因为它是推荐的执行副作用的地方(来源).

获得数据后,可以将其存储在组件状态(如果有的话,还可以存储为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 />;
  }
}