web-dev-qa-db-ja.com

React警告：flattenChildren（...）：同じキーを持つ2つの子に遭遇しました

誰かがこのエラーを修正する方法を説明してください

警告：flattenChildren（...）：同じキーを持つ2人の子供に遭遇しました

以下にコードを複製しましたが、何らかの理由でCodePenにエラーが表示されません。

var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},

render: function() {

return (
  <div className="filter-options">
    <div className="filter-option">
      <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
      <option value=''>Product</option>
      {this.props.productOptions.map(function(option) {
        return (<option key={option}  value={option}>{option}</option>)
      })}
      </select>
  </div>
  </div>
 );
 }
 });

Codepen

二次的な質問として、リセットは選択ボックスの値をリセットするはずですが、これも機能せず、レンダリング結果をリセットするだけです-これが最初の問題に関連しているかどうかはわかりませんか？

助けていただければ幸いです

javascriptreactjsselectoption
20
Chris O

値としてインデックスを追加すると、これが修正されました。 sugegstionをありがとう@azium。

  <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
      <option value=''>Product</option>
      {this.props.productOptions.map(function(option, value) {
        return (<option key={value}  value={option}>{option}</option>)
      })}
      </select>
12
Chris O

キーとしてインデックスを使用することはお勧めできません。キーのみがReactがDOM要素を識別するために使用します。アイテムをリストにプッシュするか、途中で何かを削除するとどうなりますか？キーが以前と同じ場合Reactは、DOM要素が以前と同じコンポーネントを表すことを前提としています。しかし、それはもはや真実ではありません。From： https://medium.com/@robinpokorny/index-as-a-key- is-an-anti-pattern-e0349aece318

キーとしてマッピングする各アイテムの一意の文字列を使用することをお勧めします。 <option key={value.id}>のようなもの、またはキーが存在しない場合は、<option key={value.name + value.description}>のようなことを行って一意の識別子を作成します。

27
Matt Hamil

私はkey={value.name + value.description}を使用するのではなく、インデックスを定数値と組み合わせることでキーを使用することの大ファンです。

key={'some-constant-value'+index}

これは、キーがどのコンポーネントであるかを故意に渡すことができるためです。例えば<ComponentA key={'compoent-a-'+i} />。また、このアプローチに従うのは、単純なhtml規則がid="my-some-of-the-id"などを与えるように一致するためです。

したがって、名前と説明をキーとして使用する場合でも、次のように使用できます。

key={'some-constant-'+value.name+'-'+value.description}

これは単なる意見です。ただし、小道具の値を記述するときは、HTMLの規則に従います。

0
Bhojendra Rauniyar