複数の入力フィールドがループによってペイントされていて、反応と還元の挿入時に新しい値が更新されない

Question

React with Redux.Thingsで作業しているときに、問題が1つ発生するまで非常に自由に流れました。しかし、私はあなたの助けが必要です。

だから私は（コンポーネントが反応しcomponentWillMountに持っている）私はそれがgetSupplierアクションをディスパッチするような場所で自分の行動と行動のクリエイターを持っているAPI呼び出し

からデータを取得し、私はReduxの状態に保存などサプライヤリストは、 [{name： 'Bob'、score：10、id：1}、{name： 'John'、score：10、id：2}]のようなオブジェクトの配列です。

今、私のUIは、テーブルdata.Scoreとして名前とスコアを持つテーブルで構成され、最初はgetSupplierサービスからのスコア値を持つ入力フィールドになります。

私はループとフォロー

render(){ 
     var data = this.props.supplierList; 
     if(data.length){ 
      return (
       <div className='fx-container'> 
        { 
        data.map((v,i)=>{ 
         (<div class='fx-table-row' key={v.id}> 
          <div class='fx-supp-name'>{v.name}</div> 
          <input 
          type='text' 
          className='fx-input' 
          value={v.score} 
onChange={(e)=>{this.handleInputChange(e.target.value)}} 
          onBlur={(e)=> {this.props.actions.updateScore(v.id,e.target.value)}} 
          </div>); 
         }); 
        } 
       <div> 
      ); 
     } 
     else{ 
     return null; 
     } 

    } 

だから私は私のintial値をペイントしていますし、新しい値の挿入にぼかしに私が行動を派遣して、新しい値を更新する必要があるとして、私のコンポーネント内JSXを返しましたaction.jsファイルに書かれています 私が直面している問題は、入力に値を挿入できないことです。私はバックスペースを押して新しい値を挿入できません。

私は反応して還元するのが好きなので、助けてください。 PS：上のコードは私の問題を説明するためのダミーコードです。

Answer 1

まず、componentWillMountでAPIを呼びたくない場合があります。この投稿を参照してください：https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

入力を変更できない理由は、これが制御されたフィールドであり、onChangeイベントを呼び出さないということです。参照してくださいvalue={v.score}

の入力フィールドの値がv.scoreによって制御され、それはそうthis.props.actions.updateScore()機能であなたがそうprops変更することをscoreを変更する必要がありprops

からですのでhttps://facebook.github.io/react/docs/forms.html

Answer 2

それはです。

propsはまた、あなたがonChange()代わりのonBlur()