Проблема с назначением ключей динамическим детям в приложении React-Rails

Question

Я создаю приложение React для Rails и столкнулся с проблемой назначения ключей динамическим дочерним элементам.

Ниже урезанная копия моего кода:

class Records extends React.Component { 
    render() { 
     var records = 
      this.props.data.map(function(record) { 
       return <div> 
          <Record key={record.id} data={record} /> 
         </div>; 
      }); 
     return (
      <div> 
       {records} 
      </div> 
     ); 
    } 
} 

class Record extends React.Component { 
    render() { 
     return (
      <div> 
       <h1>Title: {this.props.data.title}</h1> 
      </div> 
     ); 
    } 
} 

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

Warning: Each child in an array or iterator should have a unique "key" prop. 
Check the render method of `Records`. 

Я последовал за ссылку содержащийся в предупреждении к руководству по реагированию (http://facebook.github.io/react/docs/multiple-components.html#dynamic-children).

Хотя я чувствую, что выполнил их рекомендацию, что ключ всегда должен быть поставлен непосредственно компонентам в массиве, а не в содержимое дочернего элемента HTML каждого компонента в массиве, я все еще получаю это предупреждение в консоли.

Есть ли у кого-нибудь идеи, почему? Я полностью понимаю любую помощь, которую вы могли бы предоставить!

Answer 1

Проблема в том, что вы должны добавить реквизиты ключа к внешнему div, а не к экземпляру записи.

var records = 
      this.props.data.map(function(record) { 
       return <div key={record.id}> 
          <Record data={record} /> 
         </div>; 
      }); 

Фактически, вам не нужен оберточный div.

Предупреждение существует, потому что вам нужно добавить ключ к повторяемому элементу, а в вашем коде есть список div, каждый из которых содержит запись (а не список записей). React просит вас сделать это, чтобы иметь возможность «отслеживать» (идентифицировать) эти divs, которые были бы одинаковыми без способа их идентификации. Реагировать нуждается в этом идентификаторами эффективно отслеживать DOM мутации (например, изменение порядка их, удаляя их, и т.д.)

Затем, если вы используете ES6 (transpiled с Вавилонской или подобное) наряду с JSX вы можете только это:

var records = this.props.data.map(record => <Record data={record} key={record.id} />) 

Answer 2

В вашем образце кода ребенок находится в окружении <div>, а не Record, который имеет свойство key.

Вашей полученный HTML структура выглядит следующим образом

<div> 
    <div><h1 key="1">...</h1></div> 
    <div><h1 key="2">...</h1></div> 
    <div><h1 key="3">...</h1></div> 
</div> 

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

Ваши два варианта:

(A) Добавьте key свойство окружающего <div> таким образом, что это выглядит

<div> 
    <div key="1"><h1>...</h1></div> 
    <div key="2"><h1>...</h1></div> 
    <div key="3"><h1>...</h1></div> 
</div> 

var records = 
    this.props.data.map(function(record) { 
     return <div key={record.id}> 
       <Record data={record} /> 
      </div>; 

Или

(B) Избавиться от окружающих <div> в целом, поскольку это не нужно.

var records = 
    this.props.data.map(function(record) { 
     return <Record key={record.id} data={record} />; 

Побочное примечание: Реагировать ожидает ваш render вызов возвращает только один элемент верхнего уровня, так что вам нужно только один элемент контейнера, если вы хотите иметь несколько элементов одноуровневые в рендер вызова.