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

IT技术 reactjs
2021-04-12 15:33:45

我想在我的应用程序上实现无限滚动之类的东西。这是我的代码：

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);。这个值被添加到 api 中https://jsonplaceholder.typicode.com/todos?_limit=15&_page=${page}。
此外，我想在这里Concat的每个滚动的所有数据：return [...fetchedData, allData]。最后我需要实现这样的事情：用户向下滚动并在滚动部分添加新值，但以前不应该消失，所以当滚动条位于底部时，每次滚动时都应该添加新数据选择的底部。
问题：我无法实现我上面描述的内容，我也不知道这个问题。
问题：如何解决我的情况？
演示：https : //codesandbox.io/s/codesandboxer-example-forked-zsj6i?file=/ example.js: 0-1262

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;
根据 jsonplaceholder 文档，我可以这样搜索项目id： https://jsonplaceholder.typicode.com/todos?_limit=15&_page=${pageIdx}/${searchedId}，但我更改了代码，但它不起作用。你可以看到更新的沙盒
2021-05-29 15:33:45
现在你可以看到，如果我搜索，我不会在下拉列表中得到结果。你能看看为什么搜索不起作用吗？提前致谢。
2021-05-31 15:33:45
你的回答很棒。我有一个问题，如果我将search在此方面实现一项功能，选项将根据搜索值更新？PS：我也想保持无限滚动
2021-06-20 15:33:45
要添加对“搜索”功能的支持，您需要更新loadOptions方法。它应该从带有搜索参数的 API 中获取数据并返回它。您不需要将其设置为 state，只需返回即可。
2021-06-20 15:33:45
你怎么看这个问题？
2021-06-21 15:33:45
其它你可能感兴趣的问题
上一篇TextInput 上的 onChange 在 Formik 中不起作用 下一篇多个侦听器上的单个处理程序react