有没有使用useEffect进行无限滚动的实现，而不会触发react-hooks / exhaustive-deps皮棉警告？

Question

我正在使用React钩子实现无限滚动式解决方案。以下代码显示了我要完成的工作，可以在codeandbox here上看到一个有效的示例。

我在exhaustive-deps中收到了useEffect警告，因为我没有将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>