Reactフォームにデータがある場合はそれを設定する

Question

mongoDBからデータをフォームにあらかじめ入力しようとしています。私はフォームフィールドの状態をsetStateにcomponentDidUpdate()を使うはずですが、ページは無限ループに入ります。これは明らかな質問かもしれないので、私はちょうど解決策を見つけることができませんでした。

パス：ContactDetailsComponent.js

export default class ContactDetails extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     'name.first': '', 
    }; 

    this.handleInputChange = this.handleInputChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    componentWillReceiveProps(nextProps) { 
    var profileCandidate = this.props.profileCandidate; 
    var firstName = profileCandidate && profileCandidate.name && profileCandidate.name.first; 

    this.setState({ 
     'name.first': firstName, 
    }) 

    } 

    handleInputChange(event) { 
    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 

    this.setState({ 
     [name]: value 
    }); 
    } 

    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit} noValidate> 

      <input 
      name="name.first" 
      type="text" 
      value={this.state['name.first']} 
      onChange={this.handleInputChange} 
      className={this.state.errors['name.first'] ? "validate invalid" : "validate" } 
      /> 

     </form> 
     </div> 

    ) 
    } 
} 

ContactDetails.propTypes = { 
    profileCandidate: PropTypes.object, 
}; 

Answer 1

あなたは少し方法

componentWillReceiveProps(nextProps) { 
    var profileCandidate = nextProps.profileCandidate; 
    var firstName = profileCandidate && profileCandidate.name && profileCandidate.name.first; 

    this.setState({ 
    'name.first': firstName, 
    }) 

} 

これは、状態に更新小道具を設定します、次のあなたを変更することができます。 ありがとう