下一個道具在 react-infinite-scroll-component 中不起作用

Question

無限滾動組件位於表格中，它位於可滾動頁面內。 我嘗試將id="scrollableDiv"賦予頁面中的每個 div 以及 index.html 中的<html>仍然沒有用。 當我刪除scrollableTarget="scrollableDiv"時，fetchdata 工作直到底部的父滾動條。 在那之后 fetchData function 不工作。 當我強行滾動父滾動 fetchdata 工作。

但我希望它能夠滾動表格。 不是在滾動父級（我的意思是整個頁面）時，任何人都告訴我我應該在哪里設置id="scrollableDiv" 。 沒有指定高度的 div

這是代碼，

  const fetchMoreData = () => {
console.log("new more data");
const temp = [...ingestStats];
setTimeout(() => {
  setIngestStats((prev) => prev.concat(temp));
}, 1500);};

           <div className="row">
            <div className="col-xl-12">
              <div className="card dashboard-table">
                {/* /.card-header */}
                <div className="card-body p-0" id="collapse1">
                  <InfiniteScroll
                    dataLength={ingestStats.length}
                    next={fetchMoreData}
                    hasMore={ingestStats.length < 40 ? true : false}
                    loader={
                      <p style={{ textAlign: "center" }}>
                        <b>Loading...</b>
                      </p>
                    }
                    endMessage={
                      <p style={{ textAlign: "center" }}>
                        <b>Yay! You have seen it all</b>
                      </p>
                    }
                    scrollableTarget="scrollableDiv"
                  >
                    <table className="table table-hover table-borderless  text-center table-sm table-responsive">
                      <thead>
                        <tr>
                          <th>Activity</th>
                          <th>
                            Time Stamp{" "}
                            <span href="#0">
                              <i className="fas fa-angle-down" />
                            </span>
                          </th>
                          <th>
                            Status{" "}
                            <span href="#0">
                              <i className="fas fa-angle-down" />
                            </span>
                          </th>
                        </tr>
                      </thead>

                      <tbody>
                        {ingestStats &&
                          ingestStats.map((item, index) => (
                            <tr key={`${item.time}-${index}`}>
                              <td>{item.activity}</td>
                              <td>{item.time}</td>
                              <td>
                                {item.isActive ? (
                                  <span className="status-success">
                                    Success
                                  </span>
                                ) : (
                                  <span className="status-failed">
                                    Success
                                  </span>
                                )}
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </table>
                  </InfiniteScroll>
                </div>
                {/* /.card-body */}
              </div>
            </div>
          </div>

Answer 1

我遇到了一個類似的問題，無限滾動元素會占用整個 window 以便滾動……但是，對此有一個小修復。 實際上，您只需向 InfiniteScroll 元素添加“高度”，所有問題都會消失。 這就是它不會觸發您獲取數據的原因。 看下面的例子：

 const [fetchIsLoading, setFetchIsLoading] = useState(false); const [contacts, setContacts] = useState([]); const loadMoreData = () => { if (fetchIsLoading) { return; } setFetchIsLoading(true); fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo').then((res) => res.json()).then((body) => { setContacts([...contacts, ...body.results]); setFetchIsLoading(false); }).catch(() => { setFetchIsLoading(false); }); }; useEffect(() => { loadMoreData(); }, []);

 <div // < ------------- top level div with id 'scrollableDiv' is not even needed... but it works (if you use it or not) // id="scrollableDiv" // style={{height: 400}} > <InfiniteScroll style={{ // height: 400 <-------- this does not work. }} dataLength={contacts.length} next={loadMoreData} hasMore={true}//contacts:length < 15 loader={ <Skeleton avatar paragraph={{ rows, 1, }} active /> } height={400} // <--------- however. this works through the way this infinite scroll is set up, endMessage={<Divider plain>It is all. nothing more </Divider>} //scrollableTarget="scrollableDiv" <-------- this is not even needed the way this infinite scroll is set up. Even though you point it to the top level div it works either way... > <List dataSource={contacts} renderItem={(item) => ( <List.Item key={item.email}> <List.Item.Meta avatar={<Avatar src={item.picture:large} />} title={<div style={{ color, '#54BEC6': cursor. 'pointer' }}>{item.name.last}</div>} description={item,email} onClick={(event) => onClickContactsTab(event. item.name?last)} /> { // Use this section to put extra information about the user //<div>Extra info.</div> } </List.Item> )} /> </InfiniteScroll> </div>

下一個道具在 react-infinite-scroll-component 中不起作用

問題描述

1 個解決方案

解決方案1
1 2022-11-20 15:03:01

下一個道具在 react-infinite-scroll-component 中不起作用

問題描述

1 個解決方案

解決方案1 1 2022-11-20 15:03:01

解決方案1
1 2022-11-20 15:03:01