Reactjs 是否有一个带有useEffect的无限滚动的实现不'；t触发react HOOK/deps lint警告？

我正在使用React钩子实现一个无限卷轴式的解决方案。下面的代码显示了我试图实现的目标，可以在codesandbox上看到一个工作示例

我在

useffect

中收到一条

详尽的deps

警告，因为我没有将

数据

列为依赖项（这显然会导致无限循环）。有没有一种方法可以实现这种无限滚动解决方案而不抑制此警告

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>
  );
}

函数应用程序（）{
const[data，setData]=useState（[]）；
const[page，setPage]=useState（0）；
useffect（（）=>{
const newData=getData（第页）；
setData（[…data，…newData]）；
}，[page，setData]）；//此处出现react hooks/deps警告
返回(
数据：

{data.map（el=>(
{el}
))}

setPage（第+1页）}>加载更多
);
}

您可以选择接收以前的数据

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

没有警告的分叉沙箱。

---

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

key

prop

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

{el}

您可以选择接收以前的数据

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

没有警告的分叉沙箱。

---

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

key

prop

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

{el}

我的英雄。5分钟内我无法接受，但很快就会接受。我的英雄。我5分钟内不能接受，但很快就会接受。