Aktualisiere Zustand mit Requisiten auf Reag Kindkomponente

Question

Ich habe eine React App, wo Requisiten von einer Elternkomponente an eine Kindkomponente übergeben werden und die Requisiten dann den Status auf dem Kind setzen.

Nachdem ich einen aktualisierten Wert an die übergeordnete Komponente gesendet habe, aktualisiert die untergeordnete Komponente den Status mit den aktualisierten Requisiten nicht.

Wie kann ich den Status der untergeordneten Komponente aktualisieren?

Mein abgespeckte Code:

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

Sie müssen componentWillReceiveProps in Ihrem Kind implementieren:

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

Answer 2

Es wäre auch gut, zu überprüfen, ob Sie auch den Zustand aktualisieren müssen, da Dies führt zu einem erneuten Rendern.

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

Answer 3

Aufruf setState() in componentWillReceiveProps verursacht keine zusätzlichen Wieder machen. Empfangen von Requisiten ist ein Render und this.setState wäre ein anderes Rendering, wenn das innerhalb einer Methode wie componentDidUpdate ausgeführt würde. Ich würde empfehlen, die this.state.name !== nextProps.name in shouldComponentUpdate zu tun, so dass es immer für jedes Update überprüft wird.

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

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