tipos son react que props los estados entre ejemplos comunicacion componentes javascript reactjs

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



react native (3)

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.

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> } }


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; }


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}); } }