reactjs - react - componentWillReceiveProps no se dispara
react lifecycle diagram (4)
Después de una depuración muy dolorosa, descubrí que el problema era que se estaba llamando a ItemView dentro de un modal (react-bootstrap) que, por alguna razón, no es compatible con componentWillReceiveProps (). Terminé arreglando el problema refactorizando el código. ¡Gracias chicos!
En mis otras clases, componentWillReceiveProps funcionaba bien, pero por alguna razón, no se está disparando aquí
ItemView.jsx
class ItemView extends React.Component {
constructor(props) {
super(props);
this.state = {
name: null,
rating: null,
sector: null,
location: null,
description: null,
image: "blank.png",
show: false
};
}
...
componentWillReceiveProps(nextProps) {
if(!nextProps.companyToRender) {
this.setState({
name: null,
rating: null,
sector: null,
location: null,
description: null,
image: "blank.png",
show: false
});
}
else {
var companyToRender = nextProps.companyToRender;
this.setState({
name: companyToRender.name,
rating: companyToRender.rating,
sector: companyToRender.sector,
location: companyToRender.location,
description: companyToRender.description,
image: companyToRender.image,
show: true
});
}
...
render () {
return(
<div>
...
<CommentBox show={this.state.show} companyToRender={this.state.name}/>
...
</div>
);
}
}
CommentBox.jsx
class CommentBox extends React.Component {
constructor(props) {
super(props);
this.state = {companyToRender: null};
}
componentWillReceiveProps(nextProps) {
this.setState({companyToRender: nextProps.companyToRender});
}
...
}
El prop pasado a itemView es nulo si no se debe pasar nada, o la matriz que ItemView le está asignando.
componentWillReceiveProps () se activa solo cuando los atributos del estado se vuelven nulos, pero no cuando se establece. ((null -> entry) no funciona pero (entry -> null) funciona).
¿Estoy perdiendo algo? ¡Gracias!
- editar:
(null -> entry) actualiza el estado, pero no llama a los registros ni a ningún componente posteriorWillRecieveProps (). (Pero la entrada -> null hace).
En mi caso, mi componente estaba siendo recreado en cada render, así que tuve que poner mi lógica en el constructor. Sé que no es lo ideal, pero era un componente simple y era más fácil para mí que intentar solucionar el problema que hacía que el componente se volviera a crear cada vez.
Si alguien más está teniendo un problema con esto ...
No se llamará a componentWillReceiveProps si está recibiendo exactamente los mismos accesorios que antes. Lo que puede hacer para evitarlo es agregar un objeto ficticio que se repita cada vez que desee enviar el mismo elemento al componente en caso de que el componente se reinicie de forma interna.
click() {
this.setState({counter: ++this.state.counter, unchangingProp:true})
}
<Component unchangingProp={this.state.unChangingProp} counter={this.state.counter}/>
De esta manera, el componentWillRecieveProps se activará cada vez.
También tuve el mismo problema. Si alguien escribió una url directa, el componente no recibirá los disparos. Tuve que refactorizar mi código también para que todo funcionara.
Los cambios que hice fueron en mi index.tsx inicial teniendo algo como (es decir, tener el enrutador como elemento externo):
render(
<Router history={hashHistory} >
{routes}
</Router>
, document.getElementById(''root''));
mi ruta por defecto era a mi página app.tsx con una estructura de la siguiente manera: render () {
return (
<Provider store={store}>
<div id="appContainer">
{this.props.children}
</div>
</Provider>
);
}