AJAX e APIs

Como é que faço uma requisição AJAX?

Podes usar qualquer biblioteca AJAX que desejas com React. Algumas populares são Axios, jQuery AJAX, e o método nativo do navegador window.fetch.

Onde devo fazer uma requisição AJAX no ciclo de vida do componente?

Deves preencher dados com requisições AJAX no método componentDidMount do ciclo de vida. Isto é necessário para que consigas usar setState para atualizar o teu componente quando os dados forem recebidos.

Exemplo: Usando resultados AJAX para definir o estado local

O componente abaixo demonstra como fazer uma requisição AJAX no componentDidMount para preencher o estado (state) local.

A API de exemplo retorna um objeto JSON como este:

{
  "items": [
    { "id": 1, "name": "Apples",  "price": "$2" },
    { "id": 2, "name": "Peaches", "price": "$5" }
  ] 
}
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Erro: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>A processar...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}