Soy nuevo en Reaccionar. Estoy atascado en esto, ¡realmente agradecería algo de ayuda!
Un componente principal pasará una matriz a este componente secundario. Cuando hago console.log(this.props.repairs) me muestra una matriz de 4. Intento actualizar this.state.sortedDataList cada vez que se pasa la matriz de reparaciones. Console.log(this.state) sigue siendo mostrando sortedDataList como una matriz vacía.
¿Qué estoy haciendo mal? Muchas gracias, agradezco cualquier ayuda.
class Repairs extends React.Component { constructor(props) { super(props); this.state = { sortedDataList: [] }; } componentWillReceiveProps(nextProps) { if(this.props != nextProps) { this.setState({ sortedDataList: this.props.repairs }); } } render() { console.log(this.props); console.log(this.state); return ( <div></div> ); } }¡No importa, encontré mi tonto error! Si alguien más se atasca en esto en el futuro...
componentWillReceiveProps(nextProps) { if(this.props != nextProps) { this.setState({ sortedDataList: nextProps.repairs }); } }componentWillReceiveProps no se llama en el primer renderizado. Esa es la razón por la que no ve ninguna actualización en el estado.
De React Docs :
"Se invoca cuando un componente recibe nuevos accesorios. Este método no se llama para el renderizado inicial".
Si desea realizar el cambio solo la primera vez, puede utilizar la función de ciclo de vida de componentWillMount y actualizar el estado. En los cambios posteriores, se llamará a su componenteWillReceiveProps.
class Repairs extends React.Component { constructor(props) { super(props); this.state = { sortedDataList: [] }; } componentWillMount() { this.setState({ sortedDataList: this.props.repairs }, () => console.log(this.state.sortedDataList)); } componentWillReceiveProps(nextProps) { if(this.props != nextProps) { this.setState({ sortedDataList: nextProps.repairs }); } } render() { console.log("r",this.props); console.log("r",this.state); return ( <div></div> ); } } class App extends React.Component { render() { var arr = ["1", "2", "3"]; return ( <div > <Repairs repairs={arr}/> </div> ) } } ReactDOM.render(<App/>, document.getElementById('app')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <div id="app"></div>En tu constructor
this.state = { sortedDataList: [] };Inicialmente establece el estado en una matriz vacía, por lo que en el primer renderizado estará vacío. Luego, cada vez que se cambien los accesorios, se actualizará a través de componentWillReceiveProps().
Como dijo Shubham, no se llama al componenteWillReceiveProps() en el primer renderizado. Si desea que el estado refleje los accesorios directamente desde el primer renderizado, debe colocarlo en el constructor de la siguiente manera:
this.state = { sortedDataList: this.props.repair };