React js：永远不会无限滚动的项目（现在有更简单的例子）

Question

“react-infinite-scroller”有一个小问题。我正在使用下面的代码：

function RadioStations(props) {
  const [items, setItems] = useState(new Array());
  const [hasMore, setHasMore] = useState(true);
  let { filter, fname } = useParams();

  return (
    <div style={{ height: "700px", overflow: "auto" }}>
      <InfiniteScroll
        pageStart={0}
        loadMore={() => {
          items.push(<div>Test</div>);
          console.log(items);
          setItems(items);
          setHasMore(false);
        }}
        hasMore={hasMore}
        loader={
          <div className="loader" key={0}>
            Loading ...
          </div>
        }
        useWindow={false}
      >
        {items}
      </InfiniteScroll>
    </div>
  );
}

如我所见，我的 loadMore 函数已触发，但我的项目从未出现，我想知道为什么。

欢迎任何帮助。

谢谢。

编辑:我简化了示例。

Answer 1

如果你使用地图，你需要return一些东西

尝试添加一个return是这一行:

let jsonItems = json.map((data) =>{ return  <Station data={data} />});

Answer 2

找到了。我需要在无限滚动中添加一个div。

function RadioStations(props) {
  const [items, setItems] = useState(new Array());
  const [hasMore, setHasMore] = useState(true);
  let { filter, fname } = useParams();

  return (
    <div style={{ height: "700px", overflow: "auto" }}>
      <InfiniteScroll
        pageStart={0}
        loadMore={() => {
          items.push(<div>Test</div>);
          console.log(items);
          setItems(items);
          setHasMore(false);
        }}
        hasMore={hasMore}
        loader={
          <div className="loader" key={0}>
            Loading ...
          </div>
        }
        useWindow={false}
      >
      <div>
        {items}
      </div>
    </InfiniteScroll>
    </div>
  );
}

React js：永远不会无限滚动的项目（现在有更简单的例子）

React js : items never fed in infinite scroll (now with simpler example)

javascript

scroll

load

infinite

reactjs