defaultValueと値を再レンダリングしたときの奇妙な振る舞い

Question

defaultValueの場合、非常に奇妙な動作に気付きました。 defaultValueの部分を使用して再レンダリングすると、再レンダリングが登録されず、状態の初期レンダリングが維持されることがあります。

しかしdefaultValuevalueへの修正から、この問題を切り替える：

は写真を参照してください。

これは、この問題が発生している可能性のある他の人たちと、なぜこのようなことが起こるのかについての質問です。

生成するコードの行は、この：これは最終的にmap取得

 inner_array.push(
     <div key={j}> 
      <input defaultValue={final_line} style={{ width: "100%" }} onClick={this.highlight} ></input> 
     </div>) 

「は次のようにD：

{Object.keys(data).map((item, index) => (!item.match(/default/i)) ? <li key={index}>{item}</li> : "")} 

追加情報

だからものは再引き起こします-renderはsetStateです。以前のオブジェクトを別のオブジェクトで上書きしています。

例

はdefaultValueとアクションの値： フィドル：https://jsfiddle.net/69z2wepo/74509/

Answer 1

についてdefaultValueプロパティは、それが取り付けられていたときに、それが唯一の入力要素に設定することで重要なこと。

この例では、要素のリストが2つあり、配列インデックスをキーとして使用します。 いくつかのキーは同じ（インデックス0と1）のままですので、のアップデートにはちょうど反応します。ソースリスト（配列またはオブジェクトを切り替えると、実際に要素の配列にマップされるので、これらの要素をアンマウントし、新しいものをマウントする代わりに。そして、あなたが知っているように、defaultValueは、要素がマウントされているときに1回だけ設定されます。したがって、defaultValueへの変更は、コンポーネントの更新時には有効になりません。

この問題を解決するには、Reactを更新する代わりに<input>を再マウントする必要があります。これは、リストを切り替えるときにkey小道具が変わることを確認することによって行うことができます。 あなたの例（https://jsfiddle.net/b9qy7o3x/）を更新して、リストのIDをkey小道具に追加して、常にユニークにしました。