Es una pregunta muy interesante.
Lo recomendable es diseñar la app ReactJS de tal forma que, el dueño del estado sea el componente Padre
.
Intentar actualizar/modificar/reiniciar el estado desde props
es un antipatrón.
Ahora bien, hay formas de hacerlo, como se describe en la documentación.
Una forma es pasando un key
dinámico, cada vez que se quiera pasar una prop
la cual, como en este caso de uso, va a actualizar/modificar/reiniciar el estado del componente Hijo
.
Esto es solo una propuesta:
function Padre() {
const [zoomer,setZoomer] = useState(1);
const [uKey,setuKey] = useState(0);
const funcionA = (e) => {
let uid = 'id'+Math.floor(Math.random() * performance.now());
setZoomer(1);
setuKey(uid);
}
return (
<>
<Hijo zoomer={zoomer} key={uKey} />
<button id="siguiente" onClick={funcionA}>siguiente</button>
</>
)
};
Si se pasa un key
único en cada devolución al componente Hijo
, ReactJS creará una nueva instancia del mismo:
class Hijo extends Component {
constructor(props){
super(props)
this.state = {
//aqui ya toma el valor proveniente de props, pues es nueva instancia
zoomer: this.props.zoomer
}
}
aumentar = () => {
this.setState({ zoomer: this.state.zoomer+1 })
}
render() {
return (
<div>
<button onClick={this.aumentar}>aumentar</button>
</div>
);
}
}
Se puede ver un ejemplo mas completo en la doc de reactJS.
Demo modificaciónes al código del OP:
function Padre() {
const [zoomer,setZoomer] = React.useState(1);
const [uKey,setuKey] = React.useState(0);
const funcionA = (e) => {
let uid = 'id' + Math.floor(Math.random() * performance.now());
setZoomer(1);
setuKey(uid);
}
return (
<div>
<Hijo zoomer={zoomer} key={uKey} />
<button id="siguiente" onClick={funcionA}>siguiente</button>
</div>
)
};
class Hijo extends React.Component {
constructor(props){
super(props)
this.state = {
zoomer: this.props.zoomer
}
}
aumentar = () => {
this.setState({ zoomer: this.state.zoomer+1 })
}
render() {
console.log("zoomer hijo:",this.state.zoomer);
return (
<div>
<button onClick={this.aumentar}>aumentar</button>
</div>
);
}
}
ReactDOM.render(<Padre/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<div id="root"></div>
Demo refactor Padre dueño del estado:
function Padre() {
const [zoomer,setZoomer] = React.useState(1);
const funcionA = (e) => {
setZoomer(1);
}
function aumentar(){
setZoomer(zoomer + 1);
}
return (
<div>
<Hijo zoomer={zoomer} handler={aumentar}></Hijo>
<button id="siguiente" onClick={funcionA}>siguiente</button>
</div>
)
};
function Hijo(props){
return (
<div>
<p>{props.zoomer}</p>
<button onClick={props.handler}>aumentar</button>
</div>
);
}
ReactDOM.render(<Padre/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<div id="root"></div>
Espero que esta respuesta sea de ayuda.