javascript - recargar - Reaccionar componente no volver a renderizar en cambio de estado

¿con qué método del ciclo de vida podemos capturar errores en nuestros componentes?

Question

Tengo una clase React que va a una API para obtener contenido. He confirmado que los datos están regresando, pero no se están reproduciendo:

var DealsList = React.createClass({
getInitialState: function() {
return { deals: [] };
},
componentDidMount: function() {
this.loadDealsFromServer();
},
loadDealsFromServer: function() {
var newDeals = [];
chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function(deals) {
newDeals = deals;
});
this.setState({ deals: newDeals });
},
render: function() {
var dealNodes = this.state.deals.map(function(deal, index) {
return (
<Deal deal={deal} key={index} />
);
});
return (
<div className="deals">
<table>
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
<td>Stage</td>
<td>Probability</td>
<td>Status</td>
<td>Exp. Close</td>
</tr>
</thead>
<tbody>
{dealNodes}
</tbody>
</table>
</div>
);
}
});

Sin embargo, si agrego un debugger como el de abajo, se newDeals y luego, una vez que continúo, veo los datos:

 loadDealsFromServer: function() {
var newDeals = [];
chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function(deals) {
newDeals = deals;
});
debugger
this.setState({ deals: newDeals });
},

Esto es lo que está llamando lista de ofertas:

var Gmail = React.createClass({
render: function() {
return (
<div className="main">
<div className="panel">
<DealsList person={this.props.person} />
</div>
</div>
);
}
});

Answer 1

En mi caso, estaba llamando a this.setState({}) correctamente, pero mi función no estaba vinculada a esto, por lo que no estaba funcionando. Agregando .bind(this) a la llamada de función o haciendo this.foo = this.foo.bind(this) en el constructor lo solucionó.

Answer 2

Esto se debe a que la respuesta de chrome.runtime.sendMessage es asíncrona; Aquí está el orden de las operaciones:

var newDeals = [];
// (1) first chrome.runtime.sendMessage is called, and *registers a callback*
// so that when the data comes back *in the future*
// the function will be called
chrome.runtime.sendMessage({...}, function(deals) {
// (3) sometime in the future, this function runs,
// but it''s too late
newDeals = deals;
});
// (2) this is called immediately, `newDeals` is an empty array
this.setState({ deals: newDeals });

Cuando pausa la secuencia de comandos con el depurador, le está dando a la extensión el tiempo para llamar a la devolución de llamada; para cuando continúas, los datos han llegado y parece funcionar.

Para solucionarlo, desea realizar la llamada a setState después de que los datos regresen de la extensión de Chrome:

var newDeals = [];
// (1) first chrome.runtime.sendMessage is called, and *registers a callback*
// so that when the data comes back *in the future*
// the function will be called
chrome.runtime.sendMessage({...}, function(deals) {
// (2) sometime in the future, this function runs
newDeals = deals;
// (3) now you can call `setState` with the data
this.setState({ deals: newDeals });
}.bind(this)); // Don''t forget to bind(this) (or use an arrow function)

[Editar]

Si esto no funciona para usted, consulte las otras respuestas a esta pregunta, que explican otras razones por las que su componente podría no estar actualizado.

Answer 3

Me gustaría añadir a esto el error de escritura enormemente simple, pero tan fácil de cometer:

this.state.something = ''changed'';

... y luego no entiendo por qué no está representando y buscando en Google y entrando en esta página, solo para darse cuenta de que debería haber escrito:

this.setState({something: ''changed''});

React solo activa una nueva representación si utiliza setState para actualizar el estado.

Answer 4

Otro error tan fácil, que fue la fuente del problema para mí: escribí mi propio método shouldComponentUpdate , que no verificaba el nuevo cambio de estado que había agregado.

Answer 5

Pasaba por el mismo problema en React-Native, donde la respuesta de la API y el rechazo no se estaban actualizando.

apiCall().then(function(resp) { this.setState({data: resp}) // wasn''t updating }

Resolví el problema cambiando la function con la función de flecha

apiCall().then((resp) => {
this.setState({data: resp}) // rendering the view as expected
}

Para mí, era un tema vinculante. El uso de las funciones de flecha lo resolvió porque la función de flecha no crea su propio this , siempre se limita a su contexto externo de donde proviene