為什麼我在正確操作時仍然收到“警告：列表中的每個子元素都應該有一個唯一的“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.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取消