Ionic + React.js：警告：列表中的每个孩子都应该有一个唯一的“键”道具

问题描述

我正在将Firebase用于数据库，将Ionic + React用于移动应用程序。我已经将Firebase数据转换为数组，但是当我想映射值时。它告诉我它应该具有唯一键，但是我已经在元素的return函数中放置了唯一键。有人可以告诉我我做错了什么吗？谢谢。

这是我将对象转换为数组的代码

const Tab2: React.FC = () => {
  const [doctors,setDoctor] = React.useState([]);

  useIonViewWillEnter(()=>{
    console.log('Enter')
    firebase.database().ref('users').orderByChild('type').equalTo('doctor').on('value',(snapshot)=>{
          setDoctor(Object.keys(snapshot.val()).map(key => ({ [key]: snapshot.val()[key] })))
        })
    console.log(doctors)

  })

还有我的回报

        <IonList>
        {doctors.map(elem => {
            return(
              <IonItem key={elem['uid']}>
              <IonLabel>
                <IonText className="font-weight: bold;">
                <h3>{elem['name']}</h3>
                </IonText>
                <h4>{elem['speciality']}</h4>
                <h4>{elem['email']}</h4>
              </IonLabel>
              <br></br>
            </IonItem> 
            )
          })}
        </IonList>

我得到的是Warning: Each child in a list should have a unique "key" prop.

我的Firebase结构

更新：console.log(doctors)仅会输出一个像[]这样的空数组，我不知道为什么。在组件输入之前，我已经将其放入方法中。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）