Question

我试图从我的render方法之外返回jsx。它在没有api请求时有效，但是一旦我添加请求并添加回调，我就无法返回jsx。我该怎么做呢？我的render方法正在调用renderLocations。

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方法。在渲染方法中，只要您调用renderLocations方法，就会传递this.state.coord

并像这样更改renderLocations方法

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

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

Answer 2

在您提供的示例中，您没有从方法中返回任何内容。我建议你做一些这样的事情，你可以将componentDidMount() { this.Geo((coord) => this.setState({coord}); }, renderLocations() { const {coord} = this.state return this.state.location.map((location, index) => { return ( <div> {coord} </div> ); }) }添加到州。

%windir%\system32\cmd.exe "/K" C:\Users\x\Anaconda2\Scripts\activate.bat C:\Users\x\Anaconda2\envs\myEnv

如何通过回调从外部函数返回jsx？

2 个答案: