React push to array会复制它而不是添加它

Question

有人能帮我解决这个问题吗?我有一个状态叫做filteredpokemon_quot;它基于某些内容获取pokemon列表，然后我将其传递给名为PokemonDisplayArea的函数，在这里我将继续显示pokemon列表。但是，当我更改偏移量时，我希望该行为添加到"卡片"的先前状态上。这是呈现HTML的元素，但是，它捕获最新的filteredpokemon并将其追加两次。任何帮助将不胜感激!

这是一段视频https://clipchamp.com/watch/EcMJbOMjOaL

代码:

function PokemonDisplayArea({pokemons}) {
const [filteredPokemon, setFilteredPokemon] = useState([]);
const [offset, setOffset] = useState(20);
const [cards, setCards] = useState([]);


useEffect(() => {
let cardsSkele = [];
if (filteredPokemon.length > 0) {
for (let i = 0; i < filteredPokemon.length; i++) {
if (undefined !== filteredPokemon[i].name) {
cardsSkele.push(<PokemonCard key={filteredPokemon[i].id} name={filteredPokemon[i].name}></PokemonCard>);
cardsSkele.sort((a, b) => a.key - b.key)
}
}
setCards(prevArray => [...prevArray, ...cardsSkele]);

}

}, [filteredPokemon])


// SEARCH POKEMON RESULTS
// FILTER POKEMON RESULTS


return (
<div className="pokemon__display-area">
<GetFilteredPokemon pokemons={pokemons} amount={20} offset={offset} filteredPokemon={filteredPokemon} setFilteredPokemon={setFilteredPokemon}></GetFilteredPokemon>
{cards}
</div>
)
}

任何帮助将不胜感激，我是一个初学者，谢谢!

我尝试将不同的状态传递到useEffect，并尝试控制台记录数据，但数据似乎改变得很好，列表只是重复。

Answer 1

对于初学者来说，我会将数据存储在状态中而不是组件本身，因为它易于推理和转换。

遍历卡片并更新现有项的数据或添加新项。

function getUpdatedCardsData(prevCards, filteredPokemon) {
// get list of all the ids for the filtered pokemons
const filteredPokemonIds = filteredPokemon.map(fp => fp.id);
// This will combine the data for existing cards that are part of 
// filteredPokemon and maintain a map of ids that are new and need to be added to cards
const updatedCards = prevCards.reduce((memo, card) => {
const cardId = card.id;
const isNewCard =  !filteredPokemonIds.includes(cardId);
// add it to the map if new
if(isNewCard) {
memo.newCardIds.push(cardId);
} else {
// find the card that is in filtered pokemon
const found = filteredPokemon.find(fp => fp.id === cardId);
if(found) {
const updatedCard = {
...card,
...found
};
memo.updatedCards.push(updatedCard);
}
}
return memo;
}, {
updatedCards: [],
newCardIds: []
});
}
function getNewCards(newCardIds, filteredPokemon) {
// List of the new cards 
const newCards = newCardIds.reduce((memo, newCardId) => {
const found = filteredPokemon.find(fp => fp.id === newCardId);
if(found) {
memo.push(found);
}
return memo;
}, []);
}
function PokemonDisplayArea({pokemons}) {
const [filteredPokemon, setFilteredPokemon] = useState([]);
const [offset, setOffset] = useState(20);
const [cards, setCards] = useState([]);

useEffect(() => {
if(filteredPokemon) {
setCards(prevCards => {
const {
updatedCards,
newCardIds
} = getUpdatedCardsData(prevCards, filteredPokemon);

const newCards = getNewCards(newCardIds, filteredPokemon);

// add updated and new and sort them
const sortedCards = [...updatedCards, ...newCards].sort((a, b) => a.id - b.id);

return sortedCards;
});
}
}, [filteredPokemon])


// SEARCH POKEMON RESULTS
// FILTER POKEMON RESULTS


return (
<div className="pokemon__display-area">
<GetFilteredPokemon 
pokemons={pokemons}
amount={20} 
offset={offset} 
filteredPokemon={filteredPokemon} 
setFilteredPokemon={setFilteredPokemon}
/>

{cards.map((card, i) => {
const pokemon = card[i];

return (
<PokemonCard 
key={pokemon.id} 
name={pokemon.name}
/>
})}
</div>
)
}