React 无限滚动，我正在尝试将从 api 调用接收的数据附加到下一个 onScroll，它只是替换了最后一个数据

Question

这就是代码。我不明白如何附加数据？我在挂载时调用api，然后在滚动时调用相同的函数，然后我试图分散数据并将下一组数据附加到其中，我不知道我是否使用了错误的useEffect挂钩或useState或两者都是

import React, { useState, useEffect } from "react";
let axios = require("axios").default;
export default function Multi_cards() {
const [cards_2, getCards2] = useState();
const [isFetching, getIsfetching] = useState([false]);
let page = 1;
const card_options = {
headers: "X-Api-Key= 52f19ac566msh98914ac4f41b70ap184c2fjsn7fb7b27edf87",
};
const card_call = async () => {
await axios
.get(
`https://api.pokemontcg.io/v2/cards?pageSize=10&page=${page}?`,
card_options.headers
)
.then(function (response) {
const new_pokemon = [response.data.data];
getCards2(...new_pokemon, cards_2);
})
.catch(function (error) {
console.error(error);
});
page++;
};
function handleScroll(e) {
e.preventDefault();
if (
window.innerHeight + e.target.documentElement.scrollTop + 1 >=
e.target.documentElement.scrollHeight
) {
card_call();
getIsfetching(true);
}
}
let show_cards;
if (cards_2 && cards_2.length > 0) {
let m_cards = cards_2;
show_cards = m_cards.map(function (card) {
let price = card.cardmarket;
if ((price && price != null) || undefined) {
let new_price = price.prices;
let average_price = new_price.averageSellPrice;
let card_image = card.images.small;
return (
<div className="card" key={card.id}>
<div className=" card_returned_div_back">
<div className=" card_returned_div_back_image">
<img
className="card_returned_image"
src={card_image}
alt="for presentational card images"
></img>
</div>
<div className="card_returned_div_info">
{" "}
<h4 className="card_returned_name">{card.name}</h4>
<h4 className="card_returned_high_price">
{"Card Rarity: "}
{card.rarity}
</h4>
<h5 className="card_returned_type">{card.types}</h5>
<h5 className="card_returned_series">{card.set.series}</h5>
{/* <h5 className="card_returned_set">{card.set.name}</h5> */}
<h5 className="card_returned_last_sold">
{" "}
{"Last Updated: "}
{card.tcgplayer.updatedAt}
</h5>
<h5 className="card_returned_amount_sold">
{" "}
{"Amount on market: "}
{card.nationalPokedexNumbers}
</h5>
<h5 className="card_returned_last_sold_price">
{" "}
{"Average Sold Price: "} {average_price}
</h5>
</div>
</div>
</div>
);
}
});
}
// useEffect on mount, empty array
useEffect(() => {
card_call();
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
console.log(cards_2);
return (
<div className="card">
<h2 className="card_heading">Pokemon Cards</h2>
<div className="card_list">{show_cards}</div>
{isFetching && "Fetching more list items..."}
</div>
);
}

这是代码。我不明白如何附加数据？我在挂载时调用api，然后在滚动时调用相同的函数，然后我试图分散数据并将下一组数据附加到其中，我不知道我是错误地使用了useEffect挂钩，还是使用了useState，或者同时使用了

Answer 1

如下修复您的代码！

将cards2值初始化为空数组。

const [cards_2, getCards2] = useState([]);

然后使用扩散算子放置新的结果项和旧的结果项。

const new_pokemon = [response.data.data];
getCards2([...new_pokemon, ...cards_2]);

我希望你能找到解决方案！：D