为什么我在正确操作时仍然收到“警告：列表中的每个子元素都应该有一个唯一的“key”属性”？
<p><br /></p><blockquote>
<p>警告：列表中的每个子元素应该有一个唯一的 "key" 属性。</p>
<p>请检查 <code>UserSidebar</code> 的渲染方法。请参阅 https://reactjs.org/link/warning-keys 获取更多信息。</p>
</blockquote>
<p>这是导致上述错误的代码：</p>
<pre class="brush:php;toolbar:false;">import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import { Avatar, Button } from "@material-ui/core";
import { CryptoState } from "../CryptoContext";
import { signOut } from "firebase/auth";
import { auth, db } from "../firebase";
import { numberWithCommas } from "./Banner/Carousel";
import { AiFillDelete } from "react-icons/ai";
import { doc, setDoc } from "firebase/firestore";
const useStyles = makeStyles({
container: {
width: 350,
padding: 25,
height: "100%",
display: "flex",
flexDirection: "column",
fontFamily: "monospace",
},
profile: {
flex: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "20px",
height: "92%",
},
logout: {
height: "8%",
width: "100%",
backgroundColor: "#EEBC1D",
marginTop: 20,
},
picture: {
width: 200,
height: 200,
cursor: "pointer",
backgroundColor: "#EEBC1D",
objectFit: "contain",
},
watchlist: {
flex: 1,
width: "100%",
backgroundColor: "grey",
borderRadius: 10,
padding: 15,
paddingTop: 10,
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 12,
overflowY: "scroll",
},
coin: {
padding: 10,
borderRadius: 5,
color: "black",
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#EEBC1D",
boxShadow: "0 0 3px black",
},
});
export default function UserSidebar() {
const classes = useStyles();
const [state, setState] = React.useState({
right: false,
});
const { user, setAlert, watchlist, tokens, symbol } = CryptoState();
const toggleDrawer = (anchor, open) => (event) => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}
setState({ ...state, [anchor]: open });
};
const logOut = () => {
signOut(auth);
setAlert({
open: true,
type: "success",
message: "Logout Successfull!",
});
toggleDrawer();
};
const removeFromWatchlist = async (coin) => {
const coinRef = doc(db, "watchlist", user.uid);
try {
await setDoc(
coinRef,
{ tokens: watchlist.filter((wish) => wish !== coin?.id) },
{ merge: true }
);
setAlert({
open: true,
message: `${coin.name} Removed from the Watchlist !`,
type: "success",
});
} catch (error) {
setAlert({
open: true,
message: error.message,
type: "error",
});
}
};
return (
<div>
{["right"].map((anchor) => (
<React.Fragment key={anchor}>
<Avatar
onClick={toggleDrawer(anchor, true)}
style={{
height: 38,
width: 38,
marginLeft: 15,
cursor: "pointer",
backgroundColor: "#EEBC1D",
}}
src={user.photoURL}
alt={user.displayName || user.email}
/>
<Drawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
>
<div className={classes.container}>
<div className={classes.profile}>
<Avatar
className={classes.picture}
src={user.photoURL}
alt={user.displayName || user.email}
/>
<span
style={{
width: "100%",
fontSize: 25,
textAlign: "center",
fontWeight: "bolder",
wordWrap: "break-word",
}}
>
{user.displayName || user.email}
</span>
<div className={classes.watchlist}>
<span style={{ fontSize: 15, textShadow: "0 0 5px black" }}>
Watchlist
</span>
{tokens.map((coin) => {
if (watchlist.includes(coin.id))
return (
<div key={coin.id} className={classes.coin}>
<span>{coin.name}</span>
<span style={{ display: "flex", gap: 8 }}>
{symbol}{" "}
{numberWithCommas(coin.current_price.toFixed(2))}
<AiFillDelete
style={{ cursor: "pointer" }}
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
905
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
所以
<></>被返回而没有key。你可以简单地返回一个空字符串来避免警告