React中react-ui-cards组件unique key prop警告无法消除求助

问题根源 #

你遇到的警告并非来自UserCard组件本身，而是组件内部渲染stats数组时，初始状态的空对象缺少唯一标识，同时你错误地给单个UserCard实例添加了无效的key属性（key仅用于列表中的重复组件项）。

解决方案 #

1. 修正初始状态
   将初始state从包含空对象的数组改为空数组，避免初始渲染时传递无key的无效对象：

   const [stat, setStats] = useState([])
   

2. 移除无效的key属性
   删除UserCard组件上的key={stat.map(a => a.key)}，单个组件实例不需要key，且你生成的key值格式也不合法。

3. 确保stats项的唯一性
   你在fetchData中给每个统计项添加的key: '1'、key: '2'这类唯一值是正确的，保持即可。

修改后的完整代码 #

import React from 'react'
import { UserCard } from 'react-ui-cards';
import './InstallMain.css'
import { useEffect, useState } from 'react';
import axios from 'axios';

function InstalllMain() {
    // 修正初始state为空白数组
    const [stat, setStats] = useState([])

    useEffect(() => {
        async function fetchData() {
            const result = await axios('https://api.github.com/users/nikhilsurfingaus');
            const arr = result.data
            const test = [
                { key: '1', name: 'Followers', value: arr.followers },
                { key: '2', name: 'Following', value: arr.following },
                { key: '3', name: 'Repos', value: arr.public_repos },
            ]
            setStats(test)
        }
        fetchData();
    }, []);

    return (
        <>
            <div className="head" >
                <h1>Install Program Guide</h1>
            </div>
            <div className="prof" >
                <UserCard 
                    float 
                    header='https://i.imgur.com/vRAtM3i.jpg'
                    avatar='https://i.imgur.com/XJxqvsU.jpg'
                    name='Nikhil Naik'
                    positionName='Github Profile'
                    stats={stat}
                    // 移除了无效的key属性
                />
            </div>
        </>
    )
}

export default InstalllMain

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