Question

单击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;

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函数放入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] }中。每次调用API时，您的promise分配都会更改，从而触发重新渲染，从而导致无限循环。

{{1}}

React Hooks网站不断发送无限数量的GET请求

2 个答案: