网站继续发送无限数量的GET请求

Question

点击反应钩子网站主页上的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;

Answer 1

你有这样的代码：

​

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

​

每次承诺发生变化时，都会调用useEffect。

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

请尝试：

​

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

​

Answer 2

将API函数放入useEffect中。每次调用您的API时，您的承诺赋值都会发生变化，从而触发导致无限循环的重呈现。

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