Representación asíncrona de componentes de Reactjs

82

Quiero renderizar mi componente después de que finalice mi solicitud ajax.

Abajo puedes ver mi código

var CategoriesSetup = React.createClass({

    render: function(){
        var rows = [];
        $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) {
            $.each(data, function(index, element){
                rows.push(<OptionRow obj={element} />);
            });
           return (<Input type='select'>{rows}</Input>)

        })

    }
});

Pero recibo el error a continuación porque estoy devolviendo render dentro del método done de mi solicitud ajax.

Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

¿Hay alguna manera de esperar a que finalice mi solicitud de ajax antes de comenzar a renderizar?

javascript ajax asynchronous reactjs jquery-deferred atún
fuente
3
Además, un pequeño detalle, pero tener una recuperación de datos en una rutina de render () no es realmente una gran idea. Mantenga render () para renderizar y abstraiga el resto. Además, es posible que solo desee obtener esos datos una vez, no cada vez que se procesa el componente.
Phil Cooper

Respuestas:

131

Hay dos formas de manejar esto, y la que elija depende de qué componente debe poseer los datos y el estado de carga.

  1. Mueva la solicitud Ajax al padre y renderice condicionalmente el componente:

    var Parent = React.createClass({
  getInitialState: function() {
    return { data: null };
  },

  componentDidMount: function() {
    $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) {
      this.setState({data: data});
    }.bind(this));
  },

  render: function() {
    if (this.state.data) {
      return <CategoriesSetup data={this.state.data} />;
    }

    return <div>Loading...</div>;
  }
});

  2. Mantenga la solicitud Ajax en el componente y renderice algo más de forma condicional mientras se carga:

    var CategoriesSetup = React.createClass({
  getInitialState: function() {
    return { data: null };
  },

  componentDidMount: function() {
    $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) {
      this.setState({data: data});
    }.bind(this));
  },

  render: function() {
    if (this.state.data) {
      return <Input type="select">{this.state.data.map(this.renderRow)}</Input>;
    }

    return <div>Loading...</div>;
  },

  renderRow: function(row) {
    return <OptionRow obj={row} />;
  }
});
Michelle Tilley
fuente
6
Me encontré con esta respuesta en 2017, ¿estas dos mejores soluciones siguen siendo las mejores para usar?
Dan
@Dan React renderiza la interfaz de usuario en función de los accesorios y el estado, por lo que el concepto central seguirá siendo el mismo: hacer la solicitud Ajax, establecer algún estado y volver a renderizar algo. Sin embargo, los patrones como los componentes de orden superior se han vuelto más populares, lo que demuestra cómo se pueden abstraer las complejidades.
Michelle Tilley
1
if (this.state.data)debería ser if (this.state && this.state.data)porque a veces el estado puede ser nulo.
Timo
@Timo Hm, en qué caso sería this.stateser null?
Michelle Tilley
6
@Timo inicializa el estado en el constructor
Louis
8

El ejemplo básico de representación asíncrona de componentes se muestra a continuación:

import React                from 'react';
import ReactDOM             from 'react-dom';        
import PropTypes            from 'prop-types';

export default class YourComponent extends React.PureComponent {
    constructor(props){
        super(props);
        this.state = {
            data: null
        }       
    }

    componentDidMount(){
        const data = {
                optPost: 'userToStat01',
                message: 'We make a research of fetch'
            };
        const endpoint = 'http://example.com/api/phpGetPost.php';       
        const setState = this.setState.bind(this);      
        fetch(endpoint, {
            method: 'POST',
            body: JSON.stringify(data)
        })
        .then((resp) => resp.json())
        .then(function(response) {
            setState({data: response.message});
        });
    }

    render(){
        return (<div>
            {this.state.data === null ? 
                <div>Loading</div>
            :
                <div>{this.state.data}</div>
            }
        </div>);
    }
}
romano
fuente