Обнаружены двое детей с одинаковым ключом. ключи должны быть уникальными, чтобы компоненты сохраняли свою идентичность при обновлении

Question

Я загружаю пользователей github в мое веб-приложениеactjs. По поиску пользователя во второй раз я вижу, что при каждом клике дважды появляется нумерация страниц

Ниже приведен код.

import React, { Component } from 'react';
import { render } from 'react-dom';

const Pagination = props => {

  var pagesMap = [];

  function populatePagesMap() {
    for (var i = 0; i < props.pages; i++) {
      pagesMap.push(i + 1);
    }
  }
  populatePagesMap();

  function funcCallback(e) {
    this.props.callbackFromApp(e.target.id)
  }

  var pagesNumber = pagesMap.map(d => (
    <li className="page-item" key={d} onClick={this.funcCallback}>
      <a className="page-link" id={d}> {d} </a>
    </li>
  ));

  return (
    <nav aria-label="Page navigation example">
      <ul className="pagination pagination-sm justify-content-end">
        {pagesNumber}
      </ul>
    </nav>
  )
}

export default Pagination;

Answer 1

Я думаю, что вы должны очистить свой массив pagesMap перед повторным заполнением, поэтому код для populatePagesMap должен быть:

  function populatePagesMap() {
    pagesMap = [];
    for (var i = 0; i < props.pages; i++) {
      pagesMap.push(i + 1);
    }
  }

Answer 2

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

  var pagesNumber = pagesMap.map((d,index) => (
    <li className="page-item" key={d+index} onClick={this.funcCallback}>
      <a className="page-link" id={d}> {d} </a>
    </li>
  ));

Не используйте только index в любое время, потому что это anti-pattern , вы можете использовать его вместе с id , вреда нет.