«Каждый ребенок в списке должен иметь уникальную« ключевую »опору», когда ключ установлен

Question

Я новичок в реакции, и я попытался добавить элементы в список.

Согласно документации по реакции, приведенной в сообщении об ошибке, в ListItem должен быть только ключ.

Также не работает установка ключа на каждый дочерний элемент.Кроме того, согласно реакции это неправильный путь.

class List extends React.Component {

  listItemNumbers;
  listItems;

  constructor(props) {
      super(props);
      this.listItemNumbers = ["1","2","3","4","5"];
      this.listItems = this.listItemNumbers.map((i) => <ListItem key={"item_" + i} value={i} name={"test"} text={"test"}/>)
  }

  render() {
      return <ul className="mdc-list">
          {this.listItems}
      </ul>
    }
}

// export default List;

class ListItem extends React.Component {

  name;
  text;

  constructor(props) {
      super(props);
  }

  render() {
      return <li className="mdc-list-item"><span className="mdc-list-otem__text">{this.props.name}</span></li>;
    }

  componentDidMount() {
  }
}

ReactDOM.render(<List />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script>

Предупреждение:

Каждый дочерний элемент в списке должен иметь уникальную "ключевую" опору.

Answer 1

Я решил проблему. Это произошло потому, что я использовал список в App.js для отображения компонентов.