时间戳

首页 > 解决方案 > 遇到两个孩子用同一个钥匙。密钥应该是唯一的，以便组件在更新时保持其身份

javascript - 遇到两个孩子用同一个钥匙。密钥应该是唯一的，以便组件在更新时保持其身份

问题描述

我在我的 reactjs web 应用程序中获取 github 用户。在第二次搜索用户时，我发现每次点击时分页出现两次。

下面是代码。

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;

标签： javascriptreactjspagination

解决方案

尝试在key 构造中包含Index，这将使其独一无二。

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

任何时候都不要只使用索引，因为它是一种反模式，你可以沿着id使用它，没有害处。

推荐阅读