使用React子組件上的道具更新狀態

Question

我有一個React應用程序，其中來自父組件的道具被傳遞給子組件，然後道具設置子組件的狀態。

將更新後的值發送給父組件後，子組件未更新具有更新的道具的狀態。

如何獲取它來更新子組件上的狀態？

我的削減的代碼：

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

你需要實現你的孩子componentWillReceiveProps：

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

Answer 2

這也將是很好的檢查，如果你甚至需要更新的狀態，因爲這會導致重新渲染。

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

Answer 3

撥打componentWillReceivePropssetState()不會造成額外的重新渲染。接收道具是一個渲染器，如果這個渲染是在像componentDidUpdate這樣的方法中執行的，this.setState將是另一個渲染器。我建議在shouldComponentUpdate中執行this.state.name !== nextProps.name，以便檢查是否有更新。

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

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