如何在反应中唯一地识别标签

Question

我正在尝试使用react访问文章上的标签。在后端，我使用Django-taggit实现了标记功能，并且标记以字符串数组形式返回。

然后，这就是我实现遍历react中的标签的方式

<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’ 我该如何解决这个问题？看来每个标签都需要一个唯一的标识符才能起作用

Answer 1

在Link中添加一个关键道具.li元素上不需要关键，您需要在map中重复的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}。我更喜欢ES6模板文字而不是字符串连接。

Answer 2

如果仔细看一下代码，您会发现迭代器中输出的元素不是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>