小道具状態

Question

の値を更新していない私は、子コンポーネントのフィールドに値を渡しています：

<Field key = {field.fieldName} fieldName = {field.fieldName} value = {field.value} 
getModField={this._getModField.bind(this)} /> 

とフィールド状態では、小道具で更新する必要があります。私は、値が示されるべき

constructor(props){ 
    super(props); 

    this.state = { 
     value: this.props.value, 
     fieldName: this.props.fieldName 
    }; 
} 

更新します

<div className = "form-group" key = {this.props.fieldName} > 
    <input className="col-sm-2 control-label" name={this.props.value} 
      defaultValue={this.state.value} onChange={this._handleChange.bind(this)} 
      ref={(input) => this._value = input} /> 
</div> 

が、フィールドのコンストラクタに次の行：： 別のフィールドで0 はvalueを更新しません。フィールド名の変更のみがvalue

の変更をトリガし、私はそれがkey小道具に何らかの形で関連だと思います。 ここで何が問題になりますか？

Answer 1

私が正しく理解している場合、コンポーネントの状態を最新の小道具で更新したいと考えています。これを行う最も良い場所は、componentWillReceivePropsライフサイクルメソッドです。このメソッドの引数としてnextPropsを取得し、それに基づいてsetStateを新しい値で呼び出すことができます。

componentWillRecieveProps(nextProps) { 
    this.setState({ 
    fieldName: nextProps.fieldName, 
    value: nextProps.value 
    }); 
} 

さらに、値とフィールド名が小道具で変更されているかどうかをチェックすることができます。そうでない場合、コンポーネントを再レンダリングしないように最適化することができます。