webentwicklung-frage-antwort-db.com.de

Zwei Kinder mit demselben Schlüssel in React

Die Anwendung funktioniert, meine Klassen fügen wirklich ein neues Element hinzu, aber ich sehe unten eine Warnung in der Konsole!

Warnung: Zwei Kinder mit demselben Schlüssel, [object Object]. Schlüssel sollten eindeutig sein, damit Komponenten ihre Identität über Aktualisierungen hinweg beibehalten. Nicht eindeutige Schlüssel können dazu führen, dass untergeordnete Elemente dupliziert und/oder weggelassen werden. Das Verhalten wird nicht unterstützt und kann sich in einer zukünftigen Version ändern. in div (erstellt von ContentBody) in ContentBody

Hier ist mein Renderteil: 

 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,
      },
    );

  }

Irgendwelche Vorschläge?

Update: Hier ist der Link für mein Starterprojekt: https://github.com/zlatnaspirala/react-vs-TypeScript-starter

reactjskeyadd
11
Nikola Lukic

Sie können einen anderen Parameter in Ihrer Kartenfunktion wie folgt übergeben:

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

Der zweite Parameter des Array.prototype.map Funktion enthält tatsächlich den aktuellen Index des bestimmten Elements in diesem Array.

Auf diese Weise stellen Sie sicher, dass Ihr Schlüssel nicht dupliziert wird.

14
heyitsmarcucu

Sie übergeben Element nicht Index. Und wenn Ihr Element dasselbe ist, wird der Fehler ausgelöst. Um den Index zu übergeben, verwenden Sie den zweiten Parameter:

.map((element, index)=>

Wenn Sie nun index verwenden, erhalten Sie einen anderen Schlüssel.

3
Bhojendra Rauniyar

Weitere Informationen finden Sie unter "Schlüssel" -bezogene Warnungen und Best Practices

 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')
);

Besuchen Sie diesen Link https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys für weitere Informationen

2
Nilanth