Cómo establecer el estado de un componente de otro componente en React

1

Digamos que tengo el siguiente componente llamado Inicio:

this.state = {
    posts: []
}
componentDidMount() {
    ... data is fetched from api
}

<div
    <PostForm />
    {this.state.posts.map(post => (
     <Post key={post.id} post={post} />
    ))}
</div>

¿Cómo actualizaría el estado de Inicio o recuperaría datos de la API después de que el componente PostForm se envíe con una nueva publicación?

3

¡Bienvenido a SO!

Establecer el estado principal del niño:

Si desea que su componente secundario tenga acceso al estado de su componente principal, simplemente páselo setState()como un accesorio en su clase principal, así ...

<PostForm
    setParentState={(state) => this.setState(state)}
/>

Luego, más adelante PostForm.js, simplemente configure el estado principal así ...

this.props.setParentState(newParentStateObject);

O incluso puedes simplemente hacer ...

<PostForm
    postform={this}
/>

Y más tarde, puede llamar a cualquier cosa en postformulario con this.props.postform.anyFunctionEver().

Establecer el estado secundario del padre:

Suponga que ahora quiere hacer lo contrario: ¿actualizar el estado del componente secundario del principal? Así de fácil, establezca una referencia al definir <PostForm/>...

<PostForm
    ref={(instance) => {this.postform = instance}}
/>

Luego, puede establecer el estado del formulario posterior directamente en su clase principal ...

this.postform.setState(newChildStateObject);

Pueden pasar muchas cosas con el estado, así que si no está seguro, intente hacer un testFunc() {console.log('test');}, y luego intente pasar / activar esto entre padres e hijos.