React列表key唯一属性警告已设置key仍触发报错该如何解决？

问题原因 #

你触发key警告的核心原因是key属性绑定的位置错误：
React要求**Array.map()方法返回的每一个顶层元素都必须添加唯一的key属性**，你的代码中map直接返回的顶层元素是<ul>标签，你却把key加在了<ul>内部的<ExpenseItem>上，React无法识别到map返回元素的唯一标识，因此抛出警告。
同时你的代码还有HTML语义错误：你在循环内生成<ul>标签，会导致每一条支出数据都对应一个独立的列表容器，不符合列表“一个<ul>包裹多个列表项”的语义规范。

修复方案 #

把<ul>标签移到map循环外部，<ExpenseItem>作为map返回的顶层元素保留现有key即可，修正后代码如下：

import React from "react";
 
import ExpenseItem from "./ExpenseItem";
import './ExpensesList.css';
 
const ExpenseList = props => {
    if (props.expenses.length > 0) {
      return (
        <ul className="expenses-list">
          {props.expenses.map((expense) => (
            <ExpenseItem
              key={expense.id}
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          ))}
        </ul>
      );
    }
    return <h2 className="expenses-list__fallback">Found No Expenses</h2>;
}
 
export default ExpenseList; 

如果你的业务逻辑确实需要为每个支出项生成独立的<ul>，则需要把key属性绑定到<ul>标签上：

// 仅适用需要多ul的特殊场景，不推荐常规列表使用
return props.expenses.map((expense) => (
  <ul className="expenses-list" key={expense.id}>
    <ExpenseItem
      title={expense.title}
      amount={expense.amount}
      date={expense.date}
    />
  </ul>
));

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