web-dev-qa-db-ja.com

Reactに同じキーを持つ2人の子供

アプリケーションは機能しますが、私のクラスは本当に新しい要素を追加しますが、コンソールに以下の警告が表示されます！

警告：同じキー[object Object]を持つ2人の子に遭遇しました。コンポーネントが更新されてもIDが維持されるように、キーは一意である必要があります。一意でないキーにより、子が重複したり省略されたりする可能性があります。この動作はサポートされておらず、将来のバージョンで変更される可能性があります。 ContentBodyのdiv（ContentBodyによって作成）

これが私のレンダリング部分です：

 return (
            <div ref={this.myRef} style={this.state.myHomeStyle} >
              {this.state.elements.map((i: any) => {
                console.log(">>i>>>>", i);
                return <span style={i.myStyle} key={i} >{i}</span>;
              })}
            </div>
        );

// Where i init 
 public componentDidMount() {

    console.log('componentDidMount');
    this.myDOM  = this.myRef.current;
    this.myDOM.addEventListener(myEventsList.adaptCss, this.adaptCss);

    this.add(12,this.INLINE_TEST_ELE, null);
    this.add(13,this.INLINE_TEST_ELE, null);

  }


// Function add 
private add = (id: number, content: any, event: any ) => {

    let localArr: any[] = [];
    let mEvent: any = null;

    if (event !== undefined) {
      mEvent = event;
    }

    localArr = this.state.elements;
    localArr.Push(React.createElement("div", { key: id , onClick : mEvent }, content));

    this.setState(
      {
        elements: localArr,
        visibility : true,
      },
    );

  }

助言がありますか？

更新：これが私のスタータープロジェクトのリンクです： https://github.com/zlatnaspirala/react-vs-TypeScript-starter

reactjskeyadd
11
Nikola Lukic

次のように、マップ関数内で別のパラメーターを渡すことができます。

this.state.elements.map((element, index) => {
   return <span style={element.myStyle} key={index} >{element}</span>;
});

Array.prototype.map関数の2番目のパラメーターには、実際にはその配列内の特定の要素の現在のインデックスが含まれています。

これにより、キーが重複しないことが保証されます。

14
heyitsmarcucu

インデックスではなく要素を渡しています。そして、要素が同じである場合、エラーがスローされます。インデックスを渡すには、2番目のパラメーターを使用します。

.map((element, index)=>

ここで、indexを使用すると、異なるキーが得られます。

3
Bhojendra Rauniyar

「重要な」関連の警告とベストプラクティスの詳細については、こちらをご覧ください。

 function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

詳細については、このリンク https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys にアクセスしてください

2
Nilanth