No puedo encontrar ninguna información con respecto a una situación como esta, estoy pasando accesorios p1 de mi componente App al estado de mi componente Child1.
Cuando llamo al método buttonHandler para ver el estado de s1, aparece este error:
Child1.js:27 Uncaught TypeError: Cannot read properties of undefined (reading 'state')Componente de clase "Niño1"
import React from "react"; import { setState } from 'react' class Child1 extends React.Component { constructor(props) { super(props) this.s2 = 0 this.state = { s1: this.props.p1 } console.log(this.state.s1); } componentDidMount() { // console.log('componentDidMount()') console.log('s2 = ' + this.s2); this.s2 += 1 this.setState(() => ({ s1: this.props.p1 + 1 })) } buttonHandler() { console.log(this.state.s1); } render() { return ( <> <div> <h3>State s1</h3> <h4>{this.state.s1}</h4> </div> <hr /> <div> <h3>props from p1 to s2</h3> <h4>{this.s2}</h4> </div> <hr /> <div> <button onClick={this.buttonHandler}>Push</button> </div> </> ) } } export default Child1Aplicación.js
import './App.css'; import Child1 from './Child1'; function App() { return ( <> <Child1 p1={88} /> </> ) } export default App;Con instancias de clase, debe vincular la función a la instancia del componente :
// Use arrow syntax (recommended) or bind in the constructor buttonHandler = () => { console.log(this.state.s1); };Hay 3 problemas con el código anterior:
buttonHandler )setState (en componentDidMount )Para el enlace del detector de eventos, como se ve en la respuesta de Dennis Valsh:
buttonHandler = () => { console.log(this.state.s1); }; Para inicializar el estado con accesorios, es mejor usar getDerivedStateFromProps .
static getDerivedStateFromProps(props, state) { return {s1: props.p1 + 1}; } Para actualizar el estado usando accesorios, use el argumento de devolución de llamada de setState . (Ver https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous )
setState((state,props) =>{ return {s1: props.p1 + 1}; } Sin embargo, dado que lo que está tratando de hacer no está muy claro, diría que no necesita el componentDidUpdate en absoluto y getDerivedStateFromProps es suficiente.