javascript - son - Actualización del estado con accesorios en el componente hijo React

react native

Question

Tengo una aplicación React, donde los accesorios de un componente primario se pasan a un componente secundario y los accesorios establecen el estado en el niño.

Después de enviar un valor actualizado al componente principal, el componente secundario no actualiza el estado con los accesorios actualizados.

¿Cómo consigo que se actualice el estado en el componente secundario?

Mi código reducido:

class Parent extends React.Component {
constructor (props) {
super(props);
this.state = {name: ''''}
}
componentDidMount () {
this.setState({name: this.props.data.name});
}
handleUpdate (updatedName) {
this.setState({name: updatedName});
}
render () {
return <Child name={this.state.name} onUpdate={this.handleUpdate.bind(this)} />
}
}
class Child extends React.Component {
constructor (props) {
super(props);
this.state = {name: ''''}
}
componentDidMount () {
this.setState({name: this.props.name});
}
handleChange (e) {
this.setState({[e.target.name]: e.target.value});
}
handleUpdate () {
// ajax call that updates database with updated name and then on success calls onUpdate(updatedName)
}
render () {
console.log(this.props.name); // after update, this logs the updated name
console.log(this.state.name); // after update, this logs the initial name until I refresh the brower
return <div>
{this.state.name}
<input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
<input type="button" value="Update Name" onClick={this.handleUpdate.bind(this)} />
</div>
}
}

Answer 1

Debe implementar componentWillReceiveProps en su hijo:

componentWillReceiveProps(newProps) {
this.setState({name: newProps.name});
}

Edición: componentWillReceiveProps ahora está en desuso y se eliminará, pero hay sugerencias alternativas en el enlace de la documentación anterior.

Answer 2

Llamar a setState() en componentWillReceiveProps no causa una representación adicional. Recibir props es un render y this.setState sería otro render si se ejecutara dentro de un método como componentDidUpdate . Recomendaría hacer el this.state.name !== nextProps.name en shouldComponentUpdate para que siempre se verifique si hay alguna actualización.

componentWillReceiveProps(nextProps) {
this.setState({name: nextProps.name});
}
shouldComponentUpdate(nextProps) {
return this.state.name !== nextProps.name;
}

Answer 3

También sería bueno comprobar si incluso necesita actualizar el estado, ya que esto causará una nueva representación.

componentWillReceiveProps(newProps) {
if (this.state.name !== newProps.name) {
this.setState({name: newProps.name});
}
}