React Component требует уникальной ключевой опоры - PullRequest
Новая
       23

React Component требует уникальной ключевой опоры

0 голосов
/ 30 января 2019

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

index.js: 2178 Предупреждение: каждый дочерний элемент в массиве илиИтератор должен иметь уникальную опору «ключа».

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

    const serviceList = (props) => (

  <CardBody style={{ backgroundImage: `url(${ServiceBgImg})` }}>

    <div>
      <h3 style={{ fontWeight: 'bold' }}
      >{props.groupName}</h3>
      {props.allServices.filter(groupedServices => groupedServices.category === props.groupName)
        .map(serviceInfo =>
          <List component='nav'>
            <ListItem>
              <ListItemText primary={
                <div key={serviceInfo.id}>
                  <h5  style={{ fontWeight: 'bold' }}>
                    <span>{serviceInfo.service}</span>
                    <span
                      style={{ float: 'right' }}
                    >{serviceInfo.price}</span>
                  </h5>
                  <h5>
                    {serviceInfo.description}
                  </h5>
                </div>
              }
              />
            </ListItem>
          </List>
        )
      }
    </div>

  </CardBody>
);

export default serviceList;

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Ваш компонент List должен обернуть функцию карты, и внутри которой вы добавляете ключ к сопоставленным элементам ListItems: 

<List component='nav'>
...
.map((serviceInfo, index) =>
    <ListItem key={index}>
      ...
    </ListItem>
    ....
0 голосов
/ 30 января 2019

Самый внешний / родительский элемент, возвращаемый функцией map, должен иметь key prop.В вашем случае это не <div>, а <List>, что кажется ошибкой, так как кажется, что вы хотите перебрать отфильтрованный результат allServices, чтобы создать список serviceInfo.Если это так, вы должны переместить функцию карты чуть выше <ListItem> и назначить ей key prop.

Пример кода следующим образом: 

const serviceList = (props) => (
  <div>
    <h3 style={{ fontWeight: 'bold' }}>{props.groupName}</h3>
  <List component='nav'>
  {props.allServices.filter(groupedServices => groupedServices.category === props.groupName).map(serviceInfo =>
    <ListItem key={serviceInfo.id}>
      <ListItemText primary={
         <div key={serviceInfo.id}>
           <h5 style={{ fontWeight: 'bold' }}>
             <span>{serviceInfo.service}</span>
             <span
               style={{ float: 'right' }}
             >{serviceInfo.price}</span>
           </h5>
           <h5>{serviceInfo.description}</h5>
        </div>
       }/>
   </ListItem>)}
 </List>

</div>);
export default serviceList;
...