Question

问题与子键错误，但仅在刷新浏览器时出现。我正在使用reactjs和nextjs。

index.js：1警告：列表中的每个孩子都应该有一个唯一的“键”道具。

// For example: assuming data.event = "SUMMIT", instead of data.event = 1
if (data.event == ModalEventsEnum.SUBMIT) {
       this.calculatePorcentage();
}

我肯定会按预期提供唯一的密钥。仅当我使用重新加载按钮手动刷新浏览器并重新发布网址时，才会发生此问题

Answer 1

您没有在地图上设置关键点（在渲染的返回中）。

{ data.map( invoice => (
    <div key={invoice.id} className="card text-left mb-3">
    {/*  ^--------------^ */ }
      <div className="card-header">
        <Link href="/invoicerecord">
          <a>{invoice.invoiceNumber}</a>
        </Link>
      </div>
      <div className="card-body" key={pCounter()}>
        <div className="row">{renderInvoiceData(invoice)}</div>
      </div>
    </div>
  ));
}

您不应该使用计数器来跟踪密钥，这是一种非常低效的方式。而是使用相关数据来跟踪渲染。 invoice.id假设您的发票具有唯一的ID，这将是在React中使用密钥的一个很好的例子：）

有人可以帮助我了解我遇到的儿童钥匙问题吗

1 个答案: