添加key prop后仍出现React列表唯一key警告问题排查

先处理数据重复打印的问题 #

数据打印两次通常是React StrictMode导致的——开发环境下StrictMode会强制触发两次组件渲染、副作用执行，你的数据请求（比如放在useEffect里）会被调用两次，所以拿到两份数据：

• 临时调试方案：在项目入口文件（比如main.jsx/index.js）中去掉<StrictMode>标签，重启项目后看打印是否恢复正常。
• 生产环境无需担心：StrictMode仅在开发环境生效，生产环境不会有这个问题。如果不想关闭StrictMode，可以给请求加个“仅执行一次”的判断：

  const hasFetched = useRef(false);
  
  useEffect(() => {
    if (!hasFetched.current) {
      // 你的Supabase数据请求逻辑
      const fetchData = async () => {
        const { data } = await supabase.from('Facilities').select('*');
        console.log(data);
        // 设置state
      };
      fetchData();
      hasFetched.current = true;
    }
  }, []);
  

解决Key警告问题 #

你已经给<tr>加了key={facility.facilityID}但仍有警告，大概率是以下情况：

1. facilityID并非唯一值
   去Supabase后台检查Facilities表，确认facilityID是主键且无重复数据。如果有重复，把facilityID设为自增主键，确保每条数据的ID唯一。
2. 列表外层还有未加key的容器
   如果你的<tr>被包裹在其他循环生成的元素里（比如<div>/<tbody>），外层元素也需要加唯一key。例如：

   // 错误示例：外层div没加key
   {data.map(facility => (
     <div>
       <tr key={facility.facilityID}>
         <td>{facility.name}</td>
       </tr>
     </div>
   ))}
   // 正确写法
   {data.map(facility => (
     <div key={facility.facilityID}>
       <tr key={facility.facilityID}>
         <td>{facility.name}</td>
       </tr>
     </div>
   ))}
   

3. 数据数组存在重复项
   因为请求两次导致data数组里混入了重复的对象，即使key相同，React也会判定为重复子元素。可以先对数据去重：

   // 基于facilityID去重
   const uniqueFacilities = [...new Map(data.map(item => [item.facilityID, item])).values()];
   

   然后渲染uniqueFacilities即可。

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