作為我的第一個反應專案，我決定嘗試制作一個 Pokedex。我有一個 Pokemon 陣列，我將它傳遞給一個 List 組件并使用該.map()函式進行渲染。我知道.map()函式回傳的最根元素需要一個唯一的鍵，并且我知道如果鍵對于專案來說是真正唯一的，那么如果串列被排序，專案具有相同的鍵是理想的。因此，我認為使用口袋妖怪的“id”是理想的。我相信我已經做到了，但我無法擺脫控制臺中的警告。我真的很感激這件事。
export default class List extends React.Component {
render() {
const { list, nav } = this.props;
return (
<div className="list">
{list.map((pokemon) => (
<PokemonItem key={pokemon.id} navigation={nav} pokemon={pokemon} />
))}
</div>
);
}
}
PokemonItem 渲染方法
render() {
const { pokemon, navigation } = this.props;
return (
<div onClick={() => {
navigation.navigate("Details", { pokemon });
}}
className={"list-item bg_" pokemon.types[0]}>
<div className="header">
<div className="name">{pokemon.name}</div>
<div className="id">#{this.getId(pokemon.id)}</div>
</div>
<div className="body">
<div className="types">
{pokemon.types.map((type) => {
return <div className="type">{type}</div>;
})}
</div>
<div className="sprite">
<img src={pokemon.imgURL} alt={pokemon.name} title={pokemon.name}></img>
</div>
</div>
<div className="background-image">
<img src={PkBall} alt="" />
</div>
</div>
);
}
控制臺中顯示的警告訊息
uj5u.com熱心網友回復：
編輯 OP 的問題后，此處出現警告：
<div className="types">
{pokemon.types.map((type) => {
return <div className="type">{type}</div>;
})}
</div>
key-property 沒有設定div，應該像第一種方法一樣完成。如果type是唯一的，您可以將其用作key.
uj5u.com熱心網友回復：
檢查你的 PokemonItem 發現原因可能在于這段代碼：
{pokemon.types.map((type) => {
return <div className="type">{type}</div>;
})}
這可以通過添加 key 屬性輕松解決：
{pokemon.types.map((type) => {
return <div className="type" key={type.id}>{type}</div>;
})}
您需要在從地圖回傳的每個專案中添加一個鍵以避免此錯誤。此外，我建議您在正文中添加與您的問題相關的控制臺輸出，以便更容易查明錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330761.html
標籤：反应
上一篇：歐元的貨幣格式
下一篇：具有太多道具的React重構組件