<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.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>
所以
<></>
被回傳而沒有key
。你可以簡單地回傳一個空字串來避免警告