如何使用回调从外部函数返回jsx？

Question

我正在尝试从我的render方法之外返回jsx。当没有api请求时，它可以工作，但是一旦我添加了请求并添加了回调，我就无法返回jsx。我该怎么做呢？renderLocations在我的render方法中被调用。

renderLocations() {
    this.Geo((coord) => {
          return this.state.location.map((location, index) => {
            return (
              <div>
               {coord}
              </div>
            );
          })
        })
    }

Answer 1

您不应该这样做。

答：您不会从中退回任何东西 renderLocations

B.如果您正在等待一些稍后会到达的数据。在componentWillMount生命周期方法中启动调用，并在到达时使用来更新组件的状态this.setState({coord: coord})-这将render再次运行该方法。无论您在哪里调用render方法，都要renderLocations传递this.state.coord

并像这样更改renderLocations方法

renderLocations(coord) {
  if (coord) {
    return this.state.location.map((location, index) => {
        return (
          <div>
           {coord}
          </div>
        );
      })
  }
}

另外，不要忘记在getInitialState方法或构造函数中初始化状态。