创建 React App + Contentful 无限请求循环答案

【问题标题】：Create React App + Contentful infinite request loop创建 React App + Contentful 无限请求循环
【发布时间】：2020-10-16 19:08:22
【问题描述】：

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

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

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

我想它一定是在这个 sn-p 中从 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];
}

但我不知道为什么会出现这种无限循环的网络请求。

【问题讨论】：

标签： javascript reactjs create-react-app contentful

【解决方案1】：

试试这样的，

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); 没有任何备忘录或其他东西。因此，在useEffect 中，当 promise 解决时，您执行状态更改。导致重新渲染。在这些重新渲染中，承诺会重新定义更改 promise。再次导致useEffect 运行。这再次导致状态变化和重新渲染，这是你的无限循环

【讨论】：

您好，感谢您帮助我。但是，promise 将是未定义的，对吧？