是否有不触发 react-hooks/exhaustive-deps lint 警告的 useEffect 无限滚动实现？

Question

我正在使用 React 挂钩实现类似无限滚动的解决方案。下面的代码显示了我正在尝试完成的工作，可以在 codesandbox here 上看到一个工作示例。

我在 useEffect 中收到 exhaustive-deps 警告，因为我没有将 data 列为依赖项（这显然会导致无限循环）。有没有办法在不抑制此警告的情况下实现这种无限滚动解决方案？

function App() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(0);

  useEffect(() => {
    const newData = getData(page);
    setData([...data, ...newData]);
  }, [page, setData]); // react-hooks/exhaustive-deps warning here

  return (
    <div>
      Data:
      <ul>
        {data.map(el => (
          <li>{el}</li>
        ))}
      </ul>
      <button onClick={() => setPage(page + 1)}>Load More</button>
    </div>
  );
}

Answer 1

您可以pass a callback接收之前的数据。

  useEffect(() => {
    const newData = getData(page);
    setData(previousData => [...previousData, ...newData]);
  }, [page, setData]);

没有警告的分叉沙箱。

与上述警告无关，还要确保为每个项目添加 key 属性。

 <li key={el}>{el}</li>

是否有不触发 react-hooks/exhaustive-deps lint 警告的 useEffect 无限滚动实现？

Is there an implementation of infinite scroll with useEffect that doesn't trigger the react-hooks/exhaustive-deps lint warning?

reactjs

react-hooks

use-effect