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

Question

我正在使用React钩子实现无限滚动式解决方案。 下面的代码显示什么，我试图完成和工作的例子可以在codesandbox可以看出这里 。

我在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

您可以传递回调以接收以前的数据。

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

叉沙箱没有警告。

---

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

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