我使用firebase作为数据库,使用Ionic React作为移动应用程序。我已经将firebase数据转换为数组,但当我想映射值时。它告诉我它应该有一个唯一的键,但我已经在元素的返回函数中放置了一个唯一的键。有人能告诉我我做错了什么吗?谢谢
下面是我将对象转换为数组的代码
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>
我得到的是警告:列表中的每个孩子都应该有一个唯一的“key”道具
我的火基结构
更新:
控制台。log(doctors)
只会输出一个像这样的空数组[]
,我不知道为什么。在组件进入之前,我已经将其放入了一个方法中。
尝试将键
道具添加到每个子级以及子级中的每个元素,它将起作用。
您的代码应该如下所示:
<IonList>
{doctors.map(elem => {
return(
<IonItem key={elem['uid']}>
<IonLabel key={"lbl-" + elem['uid']}>
<IonText key={"txt-"+elem['uid']}className="font-weight: bold;">
<h3 key={"name-"+elem['uid']}>{elem['name']}</h3>
</IonText>
<h4 key={"speciality-"+elem['uid']}>{elem['speciality']}</h4>
<h4 key={"email-"+elem['uid']}>{elem['email']}</h4>
</IonLabel>
<br></br>
</IonItem>
)
})}
</IonList>
如果您注意到我在键之前添加了lbl-,txt-,以避免另一个警告:“警告:FlattChildren(…):遇到两个具有相同密钥的子项,
注意:这只是一个警告,不是错误。
这是正确的做法。
<IonList>
{doctors.map((elem, index) => {
// index has to come from the second parameter from map
return (
<IonItem key={index}>
<IonLabel>
<IonText className="font-weight: bold;">
<h3>{elem["name"]}</h3>
</IonText>
<h4>{elem["speciality"]}</h4>
<h4>{elem["email"]}</h4>
</IonLabel>
<br></br>
</IonItem>
);
})}
</IonList>;
索引必须放在第一个/父div元素中。在这种情况下,它将是
参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
另外,根据你没有得到的数据。像这样调整代码。您只需创建一个新的arr,并通过快照获取密钥。
将具有相应键的对象推送到新的arr,这样它就可以在没有特定键名(如eA9w5ynhqN9iT7kKDBt2Ane9VF3)的情况下进行编辑
useIonViewWillEnter(() => {
console.log("Enter");
let newArr = [];
firebase
.database()
.ref("users")
.orderByChild("type")
.equalTo("doctor")
.on("value", (snapshot) => {
let key;
snapshot.forEach((childSnap) => {
key = childSnap.key; // im just getting the key
const snapVal = snapshot.val(); // getting the object
newArr.push(snapVal[key]);
});
setDoctor(newArr);
// console.log(doctors)
});
});
我正在为一个看起来像这样的纸牌游戏制作一个反应大厅:大厅图像 每个名称和“kick”按钮都是一个react组件,我根据名称列表(该列表中的所有名称都是唯一的)呈现该组件。我认为,由于名称是唯一的,我可以使用名称作为键,但由于某些原因,我得到以下错误:错误消息 我做错了什么? 注意:我还尝试了为KickButton键做key={Player"1"},以使其与相应的PlayerIcon唯一,但错误仍然
我正在使用GoogleBooksAPI构建一个应用程序,我似乎正在向列表中的每个孩子传递一个唯一的密钥,但错误不会消失。我一定是做错了什么,但我不知道是什么。 注意,在const books中返回后,我有一个控制台。日志(book.id),它将在控制台中显示所有10个唯一的id键。但是当我试图使用key={book.id}将它传递给这个组件的子组件时,我得到了这个错误。
为什么它向我显示这个错误? 我有一个应用程序是在我的react native Studio中使用npx react native init myProyect创建的。 我正在测试使用“styled components/native”添加样式的方法。 我想展示不同的公司,他们的名字,地址,公司类型的图标,公司的形象和评级明星。 我为星星添加了一个svg图像。对于公司映像,出于测试目的,我已经通过网
问题内容: 我正在使用Google Books API构建应用,并且似乎正在向列表中的每个孩子传递唯一键,但是错误不会消失。我一定在做错事,但不确定。 请注意,在返回const books之后,我有一个console.log(book.id),它将在控制台中显示所有10个唯一的id键。但是,当我尝试使用key = {book.id}将其传递给该组件的子组件时,会出现此错误。 问题答案: 在需要去最
在这个简单的React应用程序中,我不明白为什么我会收到以下警告信息: 警告:列表中的每个孩子都应该有一个唯一的“键”道具。 对我来说,似乎我把密钥放在了正确的位置,形式为key={item.login.uuid} 我怎样才能摆脱警告信息?把钥匙放在哪里合适? 应用程序。js 列表js
我正在使用Nextjs开发一个电子商务网站,并正在查看myCart页面(订购物品列表) 代码为'http://localhost:5000/myCart'如下所示:myCart页面 我在导航栏中有一个购物车图标。当我点击它时,我被导航到我的购物车页面。已排序的列表将正确显示。但是在Dev工具中检查控制台时,我看到下面给出的警告。 同样,当我点击购物车图标时,页面会刷新并正确显示。此时,浏览器读取h