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

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.You 添加一个 key prop 不需要 li 上的 key element.You 需要它在你在 map.Keep 中重复的 JSX 的最顶层元素记住key prop 应该是唯一的 constant.If 你的标签是唯一的，然后只使用标签值或者我更喜欢做这样的事情。连接标签和索引，即使标签重复，结果字符串也是唯一的。

   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>

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

how to uniquely identify tags in react

django-taggit

reactjs