如何在Next.js中解决useEffect问题

2fjabf4q  于 2023-10-18  发布在  其他
关注(0)|答案(2)|浏览(174)

如何让useEffect控制组件更新?
我有这个:

  1. const [data, setData] = useState([]);
  2. useEffect(() => {
  3. fetch("/api/data")
  4. .then((res) => res.json())
  5. .then((res) => {
  6. setData(res.data);
  7. })
  8. .catch((err) => console.error(err));
  9. }, []);

这只会给我带来一次信息,但是如果我对data中的一个项目做了一些事情,那么在显示data的组件中不会显示更改。
如果我使用这个:

  1. const [data, setData] = useState([]);
  2. useEffect(() => {
  3. fetch("/api/data")
  4. .then((res) => res.json())
  5. .then((res) => {
  6. setData(res.data);
  7. })
  8. .catch((err) => console.error(err));
  9. }, [data]);

它处于无限的更新循环中。
我只希望它在data发生任何变化时发生变化,这样它就不会保持在无限循环中,我如何才能实现这一点?
展品:
在我使用过的一些useEffect中,它会要求我提供依赖关系,但这个特定的useEffect不会这样做。

58wvjzkj

58wvjzkj1#

尝试在代码中使用setData而不是setStrores

  1. const [data, setData] = useState([]);
  2. useEffect(() => {
  3. fetch("/api/data")
  4. .then((res) => res.json())
  5. .then((res) => {
  6. setData(res.data);
  7. })
  8. .catch((err) => console.error(err));
  9. }, []);
voase2hg

voase2hg2#

在第一种情况下,您将获得res.data一次,因为useEffect在组件呈现时没有依赖触发器。
在第二种情况下,setDatauseEffect内部被调用,这意味着效果将无限运行,因为每次渲染都设置data

相关问题