AJAX y APIs

¿Cómo puedo hacer una llamada AJAX?

Con React, puedes usar cualquier biblioteca AJAX. Algunas de las más populares son Axios, jQuery AJAX, y window.fetch, la cual es soportada de manera nativa en la mayoría de navegadores modernos.

¿En qué ciclo de vida de un componente puedo hacer una llamada AJAX?

Deberías ejecutar tus llamadas AJAX en el ciclo de vida componentDidMount. De esta manera, podrás llamar a setState para actualizar el componente una vez que hayas recibido tus datos.

Ejemplo: Utilizar el resultado de una llamada AJAX para actualizar el estado local de un componente

El siguiente ejemplo demuestra cómo ejecutar una llamada AJAX en componentDidMount para establecer el estado local de un componente.

La API de ejemplo devuelve el siguiente JSON:

{
  "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>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}