标签: react-infinite-scroll-component

我使用react-infinite-scroll-component库进行分页，但即使hasMore为true，loadMore也会被调用一次。

     <InfiniteScroll
      dataLength={100}
      pullDownToRefreshThreshold={50}
      next={loadMoreConversation}
      scrollableTarget="scrollableDiv"
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
      <ChatItemList
        chatItems={chatItems}
        isInDeleteMode={deleteActive}
        onBottomDrawerHandler={onBottomDrawerHandler}
      />
    </InfiniteScroll>

请帮我解决这个问题，我做错了什么？

我正在使用react-infinite-scroll-component 来实现无限滚动组件。该组件的配置为：

<div id="scrollableDiv" style={{ height: 300, overflow: "auto" }}>
       <InfiniteScroll
         dataLength={texts.length}
         next={getText}
         hasMore={true}
         loader={<h5>Loading...</h5>}
         endMessage={<p style={{textAlign:'center'}}><b>Yay! You've seen it all!</b></p>}
         scrollableTarget="scrollableDiv"
         >
         {<Texts texts = {texts}/>}
         </InfiniteScroll>
</div>

其中 texts 只是一些文本对象的状态数组；const [texts, setTexts] = useState([])
这是要调用的getTextnext方法：

const getText = async ()=>{

        const res = await axios.get("http://localhost:3001/api/sth",{
            params: {
                ids: followings.map(i => i.id),
                str_ids: followings.map(i => i.str_id)
              },
              paramsSerializer: params => {
                return qs.stringify(params)
              }
        });

        let str_ids_res = res.data.map(i => i.string_id)
        let texts_res = res.data.map(i …

我在项目中使用react-infinite-scroll-component，它在对话框之外运行良好。当我滚动到页面底部时，将从服务器获取下一组数据，但我无法在 Material-UI 对话框中获得相同的操作。

这是对话框代码：

//imports\n\nexport default function Posts() {\n  const [open, setOpen] = React.useState(false);\n   //more consts\n   ...\n  const [posts, setPosts] = useState([]);\n  const [page, setPage] = useState(1);\n\n  const fetchPosts = () => {\n    axios.get(`${serverURL}/news?page=${page}`).then((res) => {\n      const result = res.data.results;\n      setPosts([...posts, ...result]);\n      setPage((prev) => prev + 1);\n    });\n    console.log("page", page);\n  };\n\n  useEffect(() => {\n    fetchPosts();\n  }, []);\n\n  return (\n    <div>\n      <h1>News</h1>\n      <Button variant="outlined" color="primary" onClick={handleClickOpen}>\n        Open News Dialog\n      </Button>\n      <Dialog\n        onClose={handleClose}\n        aria-labelledby="customized-dialog-title"\n        open={open}\n      >\n        <DialogTitle id="customized-dialog-title" onClose={handleClose}>\n           News\n …

问题：获取双滚动条 - 删除纸张滚动条会使自动完成内容不可滚动，因此仅显示下拉列表可见高度中的内容。如果我隐藏另一个滚动，则不会调用无限滚动 API。我怎样才能让它工作：

描述 -

我正在尝试使用 Material UI Autocomplete 创建一个无限滚动，我使用react-infinite-scroll-component附加链接作为参考

我的实现方式是：

因为我们需要将无限滚动附加到呈现列表项的 Popper；因此我编写了自定义 PAPER 组件（根据文档，它负责渲染下拉列表中的项目）PaperComponent={myCustomComponent}

我的 InfiniteScrollAutoComplete 定义附在下面：

<Autocomplete
      options={list.data && list.data !== null ? list.data : []}
      getOptionLabel={(option) => option.name}
      PaperComponent={(param) => (
        <InfiniteScroll
          height={200}
          dataLength={list.total}
          next={this.handleFetchNext.bind(this)}
          hasMore={list.data.length < list.total ? true : false}
          loader={
            <p style={{ textAlign: "center", backgroundColor: "#f9dc01" }}>
              <b>Loading...</b>
            </p>
          }
          endMessage={
            <p style={{ textAlign: "center", backgroundColor: "#f9dc01" }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          <Paper {...param}  />
        </InfiniteScroll>
      )} …

我尝试使用react-infinite-scroll-component来显示一些数据卡，但我不明白如何仅在视图中显示一些数据，在这种情况下我显示所有数据，如何解决这个问题

这是我的代码

  const AllTrainingEvent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const nextData = () => {
    if (loading) return;
    setLoading(true);

    setTimeout(() => {
      const newData = dataCard.slice(0, data.length + 1);
      setData([...dataCard, ...newData]);
      setLoading(false);
    }, 1000);
  };

  return (

这里是react-infinite-scroll的使用

        <InfiniteScroll
                  dataLength={data.length}
                  hasMore={data.length < 5}
                  next={nextData}
                  loader={<h4 style={{ textAlign: "center" }}>Loading...</h4>}
                  endMessage={
                    <p style={{ textAlign: "center" }}>
                      <Divider>Yay! You have seen it all</Divider>
                    </p>
                  }
                  style={{
                    maxHeight: 350,
                    overflow: "inherit",
                  }}
                >
    
    
              <List …

有没有办法在“Table”中使用react无限滚动组件包？ https://www.npmjs.com/package/react-infinite-scroll-component 这是我的代码。

<table className="table table-sm table-dark table-striped table-hover">
              <thead className="">
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Type</th>
                  <th scope="col">Object</th>
                  <th scope="col">Url</th>
                  <th scope="col">Ip</th>
                  <th scope="col">Detail</th>
                </tr>
              </thead>
              <tbody>
                <InfiniteScroll
                  dataLength={logs.list.length} //This is important field to render the next data
                  next={fetchData}
                  hasMore={logs.hasMore}
                  loader={<h4>Loading...</h4>}
                  endMessage={
                    <p style={{ textAlign: "center" }}>
                      <b>Yay! You have seen it all</b>
                    </p>
                  }
                >
                  {logs.list.map((l, i) => {
                    return (
                      <tr key={l.id}>
                        <th scope="row">{l.id}</th>
                        <td>{l.key}</td>
                        <td>{l.object}</td>
                        <td>{l.url}</td>
                        <td>{l.ip}</td>
                        <td>----</td>
                      </tr>
                    );
                  })}
                </InfiniteScroll>
              </tbody>
            </table>

我尝试在导航栏中使用反应滚动，以便在单击任何导航元素时能够滚动到特定组件。

我一直在尝试遵循代码，但我似乎无法完全理解它。我在这里找到了一个很好的答案如何在单击导航栏链接时滚动到特定的目标组件

但我对此感到有点困惑。下面是我自己的代码，我希望将其保留为函数而不是将其更改为类：

    import React, { useState } from "react";
import "../Css/NavBar.css";
import Openclose from "./Openclose";
import Scroll from "react-scroll";
import { Link } from "react-scroll";

export default function NavBar() {
  const [isOpen, setIsOpen] = useState(false);

  const renderItems = () => {
    if (!isOpen) {
      return null;
    }
    return (
      <nav className="sidebar">
        <Scroll.ScrollLink
          to="/aboutme"
          spy={true}
          smooth={true}
          duration={500}
        >
          <Link to="/aboutme">About Me </Link>
        </Scroll.ScrollLink> // I'm just playing around with trying to make one work first.
        <li className="sidebar-link">About Me</li>
        <li …

无限滚动next js不起作用，相同的代码正常工作create-react-app