Status bijwerken met rekwisieten op onderliggende component React

Ik heb een React-app, waarbij rekwisieten van een bovenliggende component worden doorgegeven aan een onderliggende component en de rekwisieten vervolgens de status van het kind instellen.

Nadat ik een bijgewerkte waarde naar de bovenliggende component heb gestuurd, werkt de onderliggende component de status niet bij met de bijgewerkte rekwisieten.

Hoe zorg ik ervoor dat de status van de onderliggende component wordt bijgewerkt?

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

Antwoord 1, autoriteit 100%

U moet componentWillReceivePropsin uw kind:

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

Bewerken:componentWillReceivePropsis nu verouderd en zal worden verwijderd, maar er zijn alternatieve suggesties in de docs-link hierboven.

Antwoord 2, autoriteit 11%

setState()aanroepen in componentWillReceivePropsveroorzaakt geen extra re-render. Props ontvangen is één render en this.setState zou een andere render zijn als dat zou worden uitgevoerd binnen een methode als componentDidUpdate. Ik zou aanraden om de this.state.name !== nextProps.namete doen in shouldComponentUpdatedus er wordt altijd gecontroleerd op updates.

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

Antwoord 3, autoriteit 4%

Het zou ook goed zijn om te controleren of u de status zelfs moet bijwerken, aangezien dit een nieuwe weergave zal veroorzaken.

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