mapStateToProps（）から与えられたReduxの小道具を使ってコンポーネントのローカル状態を設定する

私はディスパッチ関数から返された情報を入力する必要がある入力値のリストを持っています... componentWillMountの内部で状態を設定できませんレデューサーが情報を州に返すのを待つ必要があるからです。mapStateToProps（）から与えられたReduxの小道具を使ってコンポーネントのローカル状態を設定する

インサイドcomponentWillMount方法データは、私が小道具を使用して、ローカル状態を設定

componentWillMount() { 
     this.props.getData(this.props.params.id); 
}

インサイドcomponentWillReceiveProps方法は、私がしたことを確認するため、このメソッド内SETSTATE（）のコードを入れデータとして返さ取得するコールを派遣connect（）がローカルの小道内のデータをマージした後に実行されます。（任意のより良い場所にそれを行うには？）

componentWillReceiveProps(nextProps) { 
     if (nextProps.data) { 
      this.setState({ 
       contact: nextProps.data.contact, 
       number: nextProps.data.number, 
       date: nextProps.data.date, 
       payment: nextProps.data.payment, 
       fields: nextProps.data.fields 
      }); 
     } 
}

は、その後、私は今の値として、質問の状態

renderInputFields() { 
     if (this.state.fields) { 
      return this.state.fields.map(function(field, index) { 
       return (
        <div key={'line-' + index}> 

         <input key={'quantity-' + index} 
           type="text" 
           id={index} 
           name="quantity" 
           placeholder="Add quantity" 
           value={field.quantity} 
           onChange={this.onFieldChange} /> 

         <input key={'description-' + index} 
           type="text" 
           id={index} 
           name="description" 
           placeholder="Add description" 
           value={field.description} 
           onChange={this.onFieldChange} /> 

         <input key={'price-' + index} 
           type="text" 
           id={index} 
           name="price" 
           placeholder="Add price" 
           value={field.price} 
           onChange={this.onFieldChange} /> 
         <a onClick={this.onAddField}> 
          <i className="fa fa-times" aria-hidden="true"></i> 
         </a> 

        </div> 
       ) 
      }, this); 
     } 
    } 

const mapStateToProps = (state) => { 
    return { 
     data: state.data.selected 
    } 
} 

export default connect(mapStateToProps, { getData, updateDate, genData, deleteData })(DataEditor);

それらを与えるフィールドレンダリング：

はこれが取得することをお勧めします私が必要とする結果？

出典

2017-02-19 Андрей Гузюк