使用扩展运算符组合多个数组在 React JS 中获取数据

Question

我想在我的应用程序上实现类似无限滚动的功能。这是我的代码：

import React, { useState, useEffect } from "react";

import AsyncSelect from "react-select/async";

const WithPromises = () => {
  const [page, setPage] = useState(1);
  const [allData, setAllData] = useState([]); //here should be added all data
  const [scrolll, setScrolll] = useState();
  const filterData = (inputValue) => {
    const req = fetch(
      `https://jsonplaceholder.typicode.com/todos?_limit=15&_page=${page}`
    )
      .then((response) => response.json())
      .then((res) => {
        const fetchedData = res.map(({ title }) => {
          return {
            label: title,
            value: title
          };
        });
        page > 1 && setAllData([...allData, ...fetchedData]);
        return [...fetchedData, allData];
      });
    return req;
  };

  const promiseOptions = (inputValue) => {
    return filterData(inputValue);
  };

  const scroll = (e) => {
    console.log(e);
    setScrolll(e);
    promiseOptions();
  };

  useEffect(() => {
    setPage(page + 1);
  }, [scrolll, page]);

  return (
    <AsyncSelect
      cacheOptions
      onMenuScrollToBottom={scroll}
      isClearable={true}
      isSearchable={true}
      defaultOptions
      loadOptions={promiseOptions}
    />
  );
};

export default WithPromises;

你怎么看，当滚动部分位于底部时，我会增加页面：setPage(page + 1);。这个值是在 apihttps://jsonplaceholder.typicode.com/todos?_limit=15&_page=${page} 中添加的。
我也想在这里连接每个滚动的所有数据：return [...fetchedData, allData]。最后我需要实现这样的目标： 用户向下滚动并在滚动部分添加新值，但以前的值不应消失，因此当滚动条位于底部时，每次滚动时都应在选择的底部添加新数据。
问题：我无法实现上述目标，我不知道问题所在。
问题：如何解决我的情况？
演示：https://codesandbox.io/s/codesandboxer-example-forked-zsj6i?file=/example.js:0-1262

Answer 1

import React, { useState, useEffect } from "react";

import AsyncSelect from "react-select/async";

const WithPromises = () => {
  const [page, setPage] = useState(1);
  const [items, onItemsChange] = useState([]);

  useEffect(() => {
    fetchData(page);
  }, [page]);

  const fetchData = async (pageIdx) => {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/todos?_limit=15&_page=${pageIdx}`
    ).then((r) => r.json());
    const resItems = res.map(({ title }) => ({
      label: title,
      value: title
    }));
    onItemsChange([...items, ...resItems]);
  };

  const loadOptions = () => items;

  // for search functionality use something like this:
  // const loadOptions = async (inputStr) => {
  //   const searchRes = await fetch(`${yourUrl}?search=${inputStr}`).then(r => r.json());
  //   return searchRes;
  // };

  const handleBottomScroll = () => {
    setPage((prevVal) => prevVal + 1);
  };

  return (
    <AsyncSelect
      cacheOptions
      isClearable={true}
      isSearchable={true}
      defaultOptions={items}
      onMenuScrollToBottom={handleBottomScroll}
      loadOptions={loadOptions}
    />
  );
};

export default WithPromises;