React hooks 网站不断发送无限数量的 GET 请求答案

【问题标题】：React hooks website keep sending infinite number of GET requestsReact hooks 网站不断发送无限数量的 GET 请求
【发布时间】：2020-10-20 19:52:14
【问题描述】：

点击 react hooks 网站主页中的more... 链接，它会成功显示帖子。但是当我查看 n/w 选项卡时，有些东西看起来不太好。我可以看到系统不断向内容网站发送 GET 请求。知道为什么系统会发送无限的获取请求吗？有人可以请教。

URL: https://cdn.contentful.com/spaces/space_id/environments/master/entries?fields.slug=api-testing-using-postman&content_type=course
Request Method: GET

client.js

import * as contentful from 'contentful'

const client = contentful.createClient({
  space: 'space_id',
  accessToken: 'my_token'
});

const getBlogPosts = () => client.getEntries().then(response => response.items);

const getSinglePost = slug =>
  client
    .getEntries({
      'fields.slug': slug,
      content_type: 'course'
    })
    .then(response => response.items)

export { getBlogPosts, getSinglePost }

useSinglePosts.js

import React, { useState, useEffect } from 'react';
import { getSinglePost } from '../client'

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]
}

SinglePost.js

import React from "react";
import { Link, useParams } from "react-router-dom";
import MD from "react-markdown";
import { useSinglePost } from "../custom-hooks";
import Moment from 'moment';
import SyntaxHighLighter from 'react-syntax-highlighter';
import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/hljs';


export default function SinglePost() {
  const { id } = useParams();
  const [post, isLoading] = useSinglePost(id);

  const renderPost = () => {
    if (isLoading) return (<div> <p className="noSearchData">Loading...</p> </div>);

    return (
      <React.Fragment>
        <div className="wrap">
          <div className="singlePost main">
            <div className="post__intro">
              <h3 className="post__intro__title">{post.title}</h3>
              <small className="post__intro__date">{Moment(post.createdAt).format('MMM DD YYYY')}</small>
              <SyntaxHighLighter language="javascript" style={dracula}>{post.description}</SyntaxHighLighter>
              <img
                className="post__intro__img"
                src={post.image.fields.file.url}
                alt={post.title}
              />
            </div>
          </div>
        </div>
        <div className="post__body">
          <MD source={post.body} />
        </div>
      </React.Fragment>
    );
  };

  return (
    <div className="post">
      <Link className="post__back" to="/">
        {"< Back"}
      </Link>
      {renderPost()}
    </div>
  );
}

App.js

import SinglePost from './components/SinglePost';


function App() {
  return (
    <BrowserRouter>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/tutorials" component={Tutorials} />
        <Route path="/tutorialslist" component={TutorialsList} />
        <Route path="/:id" component={SinglePost} />
      </Switch>
    </BrowserRouter>
  );
};


export default App;

【问题讨论】：

请将其缩减为minimal reproducible example。但基本上是因为每次渲染时都会发出一个新请求，这会导致重新渲染，这会发出一个新请求，这...

标签： reactjs react-hooks contentful

【解决方案1】：

你有这个代码：

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

每当promise发生变化时，都会调用useEffect。

我不认为这是故意的。我的假设是，这将创建一个无限递归。

请尝试：

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

【讨论】：

感谢您的帮助，您的回答已停止发送多个 GET 请求。

【解决方案2】：

将您的 API 函数放在 useEffect 中。每次调用您的 API 时，您的 Promise 分配都会更改，从而触发重新渲染，从而导致无限循环。

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]
}

【讨论】：