返回具有多个子项的列表时，React 中的唯一“键”道具

Question

我必须在一个反应​​组件中呈现多个列表。我通过以下方式创建我的列表：

var jobResources = null;
if (this.state.jobResources) {
  jobResources = _.map(this.state.jobResources, function(jobResource, i) {
    return <ul><li key={i}>{jobResource.resource.name}</li><li key={Math.floor(Math.random()  * (1000 - 100)) + 100}>{translations.resourceType[jobResource.resource.resourceType.name]}</li></ul>
  })
}

说到渲染，我是这样渲染列表的：

  <div>
  <h2>Who is Working on the Project?</h2>
  {this.state.jobResources ? jobResources : null}
  </div>

生成的渲染如下：

<ul data-reactid=".0.2.0.2.1:0">
  <li data-reactid=".0.2.0.2.1:0.$0">Mark Smith</li>
  <li data-reactid=".0.2.0.2.1:0.$270">Hair &amp; MakeUp</li>
</ul>
<ul data-reactid=".0.2.0.2.1:1">
  <li data-reactid=".0.2.0.2.1:1.$1">John Doe</li>
  <li data-reactid=".0.2.0.2.1:1.$377">Photographer</li>
</ul>

在我看来，键是独一无二的。但是，react 给了我以下警告：

警告：数组或迭代器中的每个子元素都应该有一个唯一的“键” 支柱。检查JobDetailPage的渲染方法。看 http://facebook.github.io/react/docs/multiple-components.html#dynamic-children 了解更多信息。

谁能告诉我我犯了什么错误以及解决这个问题的正确方法是什么？

Answer 1

没关系，想通了。显然，列表元素也应该有一个键。因此，创建列表的正确方法是：

var jobResources = null;
if (this.state.jobResources) {
  jobResources = _.map(this.state.jobResources, function(jobResource) {
    return <ul key={jobResource.id}><li key={jobResource.resource.name}>{jobResource.resource.name}</li><li key={jobResource.resource.resourceType.name}>{translations.resourceType[jobResource.resource.resourceType.name]}</li></ul>
  })
}

Answer 2

我通常这样做

if (this.state.jobResources) {
  jobResources = _.map(this.state.jobResources, function(jobResource, i) {
    return (
      <ul>
        <li key={i.toString()}>{jobResource.resource.name}</li>
        <li key={`key${i}`}>
          {
            translations.resourceType[
              jobResource.resource.resourceType.name
            ]
          }
        </li>
      </ul>
    );
  });
}

Answer 3

这个来自 lodash/underscore 的实用函数很容易解决这个问题：

key={_.uniqueId()}