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

Question

这是代码。 我不明白如何 append 数据？ 我在挂载时调用 api，然后我在滚动时调用相同的 function，然后我尝试分散数据和 append 使用错误的钩子或使用我知道的下一组数据

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>
  );
}

这是代码。 我不明白如何 append 数据？ 我在挂载时调用 api，然后我在滚动时调用相同的 function，然后我尝试分散数据和 append 使用错误的钩子或使用我知道的下一组数据

Answer 1

修复您的代码，如下所示！

将cards_2 值初始化为空数组。

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

然后使用扩展运算符放置新结果项和旧结果项。

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

我希望你找到一个解决方案：：D