为什么我在正确操作时仍然收到“警告：列表中的每个子元素都应该有一个唯一的“key”属性”？
<p><br /></p><blockquote>
<p>警告：列表中的每个子元素应该有一个唯一的 "key" 属性。</p>
<p>请检查 <code>UserSidebar</code> 的渲染方法。请参阅 https://reactjs.org/link/warning-keys 获取更多信息。</p>
</块引用>
<p>这是导致上述错误的代码：</p>
从“react”导入React;
从“@material-ui/core/styles”导入{ makeStyles }；
从“@material-ui/core/Drawer”导入抽屉；
从“@material-ui/core”导入{头像，按钮}；
从“../CryptoContext”导入{CryptoState}；
从“firebase/auth”导入{signOut}；
从“../firebase”导入{auth，db}；
从“./Banner/Carousel”导入{ numberWithCommas }；
从“react-icons/ai”导入{AiFillDelete}；
从“firebase/firestore”导入{doc，setDoc}；
const useStyles = makeStyles({
容器： {
宽度：350，
填充：25，
高度：“100%”，
显示：“弯曲”，
flexDirection: "列",
字体系列：“等宽字体”，
},
轮廓： {
弹性：1，
显示：“弯曲”，
flexDirection: "列",
对齐项目：“居中”，
间隙：“20px”，
高度：“92%”，
},
登出： {
高度：“8%”，
宽度：“100%”，
背景颜色：“#EEBC1D”，
边距顶部：20，
},
图片： {
宽度：200，
高度：200，
光标：“指针”，
背景颜色：“#EEBC1D”，
objectFit：“包含”，
},
关注列表：{
弹性：1，
宽度：“100%”，
背景颜色：“灰色”，
边框半径：10，
填充：15，
填充顶部：10，
显示：“弯曲”，
flexDirection: "列",
对齐项目：“居中”，
间隙：12，
溢出Y：“滚动”，
},
硬币： {
填充：10，
边框半径：5，
颜色：黑色”，
宽度：“100%”，
显示：“弯曲”，
justifyContent: "空间之间",
对齐项目：“居中”，
背景颜色：“#EEBC1D”，
boxShadow: "0 0 3px 黑色",
},
});
导出默认函数 UserSidebar() {
const 类 = useStyles();
const [状态，setState] = React.useState({
右：假，
});
const { 用户、setAlert、监视列表、代币、符号 } = CryptoState();
consttoggleDrawer = (锚点, 打开) => （事件）=> {
如果 （
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
）{
返回;
}
setState({ ...state, [锚点]: 打开 });
};
const logOut = () =>; {
退出（验证）；
设置警报（{
开放：真实，
类型：“成功”，
message: "注销成功！",
});
切换抽屉（）；
};
const removeFromWatchlist = async (coin) =>; {
const coinRef = doc(db, "watchlist", user.uid);
尝试 {
等待 setDoc(
币参考，
{ tokens: watchlist.filter((wish) => Wish !== coin?.id) },
{ 合并：真 }
）；
设置警报（{
开放：真实，
消息：`${coin.name} 已从监视列表中删除！`,
类型：“成功”，
});
} 捕获（错误）{
设置警报（{
开放：真实，
消息：错误消息，
类型：“错误”，
});
}
};
返回 （
{["右"].map((锚点) => (
;
<阿凡达
onClick={toggleDrawer(anchor, true)}
风格={{
身高：38，
宽度：38，
左边距：15，
光标：“指针”，
背景颜色：“#EEBC1D”，
}}
src={用户.photoURL}
alt={用户.显示名称||用户.电子邮件}
>>
<抽屉
锚={锚}
打开={状态[锚点]}
onClose={toggleDrawer(anchor, false)}
>
<div className={classes.container}>
<div className={classes.profile}>
<阿凡达
类名={类.图片}
src={用户.photoURL}
alt={用户.显示名称||用户.电子邮件}
>>
<跨度
风格={{
宽度：“100%”，
字体大小：25，
文本对齐：“居中”，
字体粗细：“加粗”，
wordWrap: "断词",
}}
>
{用户.显示名称||用户.电子邮件}
</span>
;
;
关注列表
</span>
{tokens.map((硬币) => {
if (watchlist.includes(coin.id))
返回 （
;
{coin.name};
{象征}{” ”}
{numberWithCommas(coin.current_price.toFixed(2))}
<自动填充删除
样式={{光标:“指针”}}fontSize="16"
onClick={() => removeFromWatchlist(coin)}
/>
</span>
</div>
);
else return <></>;
})}
</div>
</div>
<Button
variant="contained"
className={classes.logout}
onClick={logOut}
>
Log Out
</Button>
</div>
</Drawer>
</React.Fragment>
))}
</div>
);
}</pre>
<p>我已经在需要的地方提供了特定的键，但是我找不到代码中的错误。</p>全部回复(1)我来回复
P粉3302320962023-08-14 09:04:30
else return <></>
所以<></>被返回而没有key。
你可以简单地返回一个空字符串来避免警告
else return ''
回复0取消