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 />;
  }
}

Answer 2

例如：

const mapDispatchToProps = dispatch => ({
  onLoad: (payload ) => {
    dispatch({ type: APP_LOAD, payload});}  
});

class App extends React.Component {
 componentWillMount() {
   this.props.onLoad(Promise.all([reduxagent.get.all()]));
 }
}

在这里，您可以在应用程序启动后立即在道具中加载道具。

在React app上调用API启动

2 个答案: