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

Question

我正在使用 React hooks 实现一个无限滚动的解决方案。以下代码显示了我正在尝试完成的工作，并且可以在此处的代码和框上看到一个工作示例。

我收到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

您可以通过回调来接收以前的数据。

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

没有警告的分叉沙箱。

---

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

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