javascript - react 中的异步xmlhttp请求

Question

我正在尝试在 React 中实现异步 XMLHttpRequest。 这是我的尝试:

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) {
      json_obj = xhr.responseText;
      status = true;
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);

class Welcome extends React.Component {
  render() {
    return (
      <div>
          <img src= {status ?  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>

我一直在考虑给它添加监听器，但我不知道该怎么做。

总的来说，我在异步 XMLHttpRequest 加载并返回值后遇到更新问题。

Answer 1

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

componentDidMount 用于副作用。添加事件监听器、AJAX、改变 DOM 等。

此外，您应该考虑使用新的 fetch API .

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