时间戳

首页 > 解决方案 > 创建 React App + Contentful 无限请求循环

javascript - 创建 React App + Contentful 无限请求循环

问题描述

我开始遵循以下教程： https ://blog.logrocket.com/using-a-headless-cms-with-react/

不幸的是，一旦我完成它，我注意到Network在我导航到其中一个子项目后，我的 chrome 选项卡开始变得疯狂：

这是简化的代码版本：https ://codesandbox.io/s/react-contentful-hx0de?from-embed

我认为它一定是在这个片段中从 Contentful 调用它的方式，它使用一个 Promise 来获得结果：

export default function useSinglePost(slug) {
  const promise = getSinglePost(slug);

  const [post, setPost] = useState(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    promise.then(result => {
      setPost(result[0].fields);
      setLoading(false);
    });
  }, [promise]);

  return [post, isLoading];
}

但我不知道为什么我会得到这个无限循环的网络请求。

在此处输入图像描述

标签： javascriptreactjscreate-react-appcontentful

解决方案

试试这样的，

export default function useSinglePost(slug) {
  const [post, setPost] = useState(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    getSinglePost(slug)
     .then(result => {
      setPost(result[0].fields);
      setLoading(false);
    });
  }, [slug]);

  return [post, isLoading];
}

你const promise = getSinglePost(slug);没有任何备忘录或其他东西。因此，在useEffectpromise 解决时，您执行状态更改。导致重新渲染。并且在那些重新渲染承诺会重新定义更改promise. 再次导致useEffect运行。这再次导致状态变化和重新渲染，这是你的无限循环

推荐阅读