0

我有一个代码，它调用具有一定数量数据的 API 并接收它们。我希望第二次调用将新检索到的数据添加到使用 React-query 库的现有数据中。

到目前为止，我的代码是：

const fetchData = async ({queryKey : [key , pages]}) => {
  
  return (await fetch(`http://jservice.io/api/random?count=${pages}`)).json()
}

function App() {
  const [state, setState] = React.useState(10);
  const {isLoading, error, data , } = useInfiniteQuery(['general' , state], fetchData , {keepPreviousData : true} )

  
  setTimeout(() => {
    setState(20)
  }, 4444);

  console.log(data)
  return (
    <div className="App">
      h
    </div>
  );
}

我希望通过仅使用 React-query 钩子将新获取的数据添加到现有数据来达到 4444 时间线标记。

我怎样才能做到这一点？

4

1 回答 1

0

您需要使用fetchNextPagefrom 查询。调用它来加载下一页。onClick 或超时后。

<button onClick={fetchNextPage}>Load more</button>

也不要setTimeout在渲染函数中设置，因为它将在每次渲染时调用并执行，这将删除您的进度。不要自己跟踪当前页面，而是让 react-query 处理它。只需将getNextPageParam函数设置为返回获取下一页所需的方式并将其pageParam从查询上下文中提取fetchData

要呈现数据，您需要映射从查询内部数据返回的页面，并且对于每个页面，查询返回的项目：

{isSuccess &&
  data.pages.map((page, index) => (
    <div key={index}>
        {page.results.map((poke) => (
            <div key={poke.name}>{poke.name}</div>
         ))}
    </div>
))}

这是一个带有口袋妖怪的沙盒。

于 2021-01-31T23:54:27.183 回答