Estoy tratando de aprender a reaccionar y me encontré con un inconveniente. Estoy luchando por actualizar el padre en función del estado del niño. Me las arreglé para pasar el estado del niño al padre al vincular el estado del niño al accesorio del mismo niño cuando el padre lo invoca.
Parent.js
import React, { Component, setState } from 'react' import './Parent.css' import Child from './Child' export class Parent extends Component { constructor(props) { super(props) this.state = { childState: false } } checkState(newState){ console.log(`new state is ${newState}`) } render() { return ( <div class={`parent ${this.state.childState ? 'parent-child-not-clicked' : 'parent-child-clicked'}`}> <h1>{this.state.childState === true ? 'true' : 'false'}</h1> {/* <Child changeState={(newState)=>{newState === true ? this.setState(prevState => ({childState: prevState.childState+1})):this.setState(prevState => ({childState: prevState.childState-1}))}}></Child> */} <Child changeState={(newState) => {console.log(newState)}}></Child> </div> ) } } export default Parent Child.js
import React, { Component } from 'react' import "./Child.css" export class Child extends Component { constructor(props) { super(props) this.state = { childState: false } this.updateState = this.updateState.bind(this) } updateState(){ this.setState({ childState: !this.state.childState }, () => {return this.state.childState}) } render() { return ( <div className="child"> <h1>{`child state is ${this.state.childState}`}</h1> <div onClick={() => this.props.changeState(this.updateState())}>Click</div> </div> ) } } export default Child La consola sigue mostrándose indefinida, lo que significa que newState no contiene el valor booleano verdadero/falso. Agradecería si alguien me puede señalar en la dirección correcta.
gracias de antemano
this.updateState() no devuelve nada. Entonces no se envía nada a this.props.changeState .
Probablemente, el enfoque más simple es eliminar this.props.changeState del marcado JSX y moverlo a updateState . Luego, dentro de updateState defina el nuevo objeto de estado, actualice el estado del componente con él y páselo a la función prop. Algo como esto:
updateState(){ const newState = { childState: !this.state.childState }; this.setState(newState); this.props.changeState(newState); } Luego, en JSX, simplemente llame a updateState (poniendo menos lógica en línea en JSX y más en las funciones):
<div onClick={this.updateState}>Click</div>Aparte, si bien el ejemplo que se muestra es claramente artificial, rastrear el mismo estado en dos lugares diferentes probablemente sea un diseño incorrecto . Si el padre solo necesita actualizaciones, pásele solo las actualizaciones que necesita. Pero si el padre está rastreando el estado, el niño no necesita duplicar ese esfuerzo. Puede eliminar el estado del niño por completo y simplemente pasarle los valores que necesita, simplificando todo.