建议在componentDidMount生命周期方法中进行 AJAX 调用。

componentDidMount是为了副作用。添加事件侦听器、AJAX、改变 DOM 等。

此外，您应该考虑使用新的fetchAPI。

class Welcome extends React.Component {
  constructor() {
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/photos/').then(response => {
      return response.json();
    }).then(json => {
        this.setState({ data: json});
    }).catch(error);
  }

  render() {
    if (this.state.data) {
      return <img src={this.state.data[0].url} />
    }
    else {
      return <div>Loading...</div>
    }
  }
}

使用组件的生命周期来加载数据，然后异步设置状态。您还需要对返回给您的数据使用 JSON.parse。

class Welcome extends React.Component {
  state = {}

  componentDidMount() {
    var xhr = new XMLHttpRequest();
    var json_obj, status = false;
    xhr.open("GET", "https://jsonplaceholder.typicode.com/photos/", true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var json_obj = JSON.parse(xhr.responseText);
          status = true;
          this.setState({ json_obj });
        } else {
          console.error(xhr.statusText);
        }
      }
    }.bind(this);
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(null);
  }

  render() {
    return (
      <div>
          <img src= {this.state.json_obj ?  this.state.json_obj[0].url : 'loading...'}></img>
      </div>
    );
  }
}
ReactDOM.render(
   <Welcome/>,
   document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

您需要在 React 生命周期内执行 ajax 请求。最简单的方法是监听componentDidMount，执行你的ajax请求，然后设置状态。

class Welcome extends React.Component {
  constructor() {
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    var xhr = new XMLHttpRequest();
    var status = false;
    xhr.open("GET", "https://jsonplaceholder.typicode.com/photos/", true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          this.setState({ data: xhr.responseText });
          status = true;
        } else {
          console.error(xhr.statusText);
        }
      }
    };
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(null);
  }

  render() {
    if (this.state.data) {
      return <img src={this.state.data[0].url}></img>
    }
    else {
      return <div>Loading...</div>
    }
  }
}

您可以在此处阅读有关组件生命周期的更多信息：https : //facebook.github.io/react/docs/react-component.html

• 请注意，此示例不处理您的组件在 XHR 请求完成之前被卸载的事实。为简单起见，这里不包括它。

我建议挂钩 componentDidMount 生命周期事件并在那里提出您的请求。然后，一旦完成，调用setState更新将重新渲染组件的状态。如果您需要更多信息，请在此处查看视频：

https://www.youtube.com/watch?v=YpM3YK9Uue0