как однозначно идентифицировать теги в реакции - PullRequest
Новая
       54

как однозначно идентифицировать теги в реакции

0 голосов
/ 21 ноября 2018

Я пытаюсь получить доступ к тегам статьи с помощью реакции.В бэкэнде я реализовал функцию тегирования с помощью Django-taggit, и теги возвращаются в виде массива строк.

enter image description here

Тогда вот как яреализовали зацикливание тегов в реакции 

<ul className="tags" >
    {!article.tags ? "" : article.tags.map(tag => (

       <Link to="/view-articles">
          <li className="d-inline tag-name" 
              key={tag}
              value={tag}>
              {tag}
          </li>
       </Link>

    ))}
</ul>

Проблема в том, что реакция дает ошибку ‘Missing "key" prop for element in iterator’ Как мне решить эту проблему?Кажется, мне нужен уникальный идентификатор для каждого тега, чтобы это работало

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Если вы присмотритесь к своему коду, вы увидите, что элемент, который выводится в итераторе, - это не элемент li (в котором вы разместили свойство key), а Link.Попробуйте это: 

<ul className="tags" >
    {!article.tags ? "" : article.tags.map(tag => (

       <Link to="/view-articles" key={tag}>
          <li
              className="d-inline tag-name" 
              value={tag}
          >
              {tag}
          </li>
       </Link>

    ))}
</ul>
0 голосов
/ 21 ноября 2018

Добавьте ключевую реквизит в Link. Вам не нужен ключ для элемента li. Он вам нужен в самом верхнем элементе JSX, который вы повторяете на карте. Помните, что ключевая реквизит должна быть уникальной константой.Если ваши теги уникальны, то просто используйте значение тега, или я предпочитаю делать что-то подобное.Объединение тега и индекса таким образом, что даже если тег повторяется, результирующая строка будет уникальной. 

   article.tags.map((tag,index) => (

       <Link key = {`${tag}-index`} to="/view-articles">
          <li className="d-inline tag-name" 
             value={tag}>
           {tag}
        </li>
   </Link>

В качестве идентификатора {${tag}-index} означает просто {tag + '' + index} .Iпредпочитаю литералы шаблона ES6 конкатенации строк.

...