javascript - tutorial - Reactjs representación asíncrona de componentes

react tutorial 2018

Question

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

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 siguiente error porque estoy devolviendo render dentro del método hecho 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 forma de esperar a que finalice mi solicitud de ajax antes de comenzar a renderizar?

Answer 1

El ejemplo básico de representación asíncrona de componentes está 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>);
}
}

Answer 2

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

1. Mueva la solicitud de 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 de Ajax en el componente y renderice algo condicionalmente 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} />;
   }
   });