React报错：列表子元素需唯一key属性，排查无果求解答

你遇到的警告是因为在tokens.map循环中，存在没有唯一key的列表子元素。具体来说：

在你的代码里，tokens.map中当watchlist.includes(coin.id)不成立时，返回了一个空的Fragment（<></>），这个元素没有设置key属性。React要求列表渲染的每一个子元素（包括空元素）都必须拥有唯一的key，否则就会触发该警告。

修复方案 #

方案1：给空Fragment添加key #

将空返回部分改为带key的完整Fragment：

{tokens.map((coin) => {
  if (watchlist.includes(coin.id))
    return (
      <div key={coin.id} className={classes.coin}>
        {/* 现有内容 */}
      </div>
    );
  else return <React.Fragment key={coin.id} />;
})}

注意：短语法的<></>无法添加key，必须使用完整的<React.Fragment>标签。

方案2：先过滤再映射（更推荐） #

先筛选出在watchlist中的coins，再进行map渲染，避免返回空元素：

<div className={classes.watchlist}>
  <span style={{ fontSize: 15, textShadow: "0 0 5px black" }}>
    Watchlist
  </span>
  {tokens
    .filter(coin => watchlist.includes(coin.id))
    .map((coin) => (
      <div key={coin.id} className={classes.coin}>
        <span>{coin.name}</span>
        <span style={{ display: "flex", gap: 8 }}>
          {symbol} {numberWithCommas(coin.current_price.toFixed(2))}
          <AiFillDelete
            style={{ cursor: "pointer" }}
            fontSize="16"
            onClick={() => removeFromWatchlist(coin)}
          />
        </span>
      </div>
    ))}
</div>

这种方式更简洁，也从根源上避免了空元素导致的key问题，同时减少了不必要的渲染分支。

内容的提问来源于stack exchange，提问作者Kirthi Bagrecha