太多的重新渲染。React限制呈现的数量

Question

我试图将我的文章对象从我的graphql服务器保存到状态，但是当我试图将它们保存到状态时，它给了我这个错误“太多的重新呈现”

我在客户机上使用console.log进行了检查，getNews()方法为我的x50文章对象提供了正确的输出对象，但是当我试图将它保存到状态时，它会崩溃。

​

import React from "react";
import Layout from "../components/Layout";
import Article from "../components/Article";

import { useState, useEffect } from "react";
import { gql, useQuery } from "@apollo/client";

const News = () => {
  const [articles, setArticles] = useState([]);

  const getNews = () => {
    const LATEST_NEWS = gql`
      query {
        getNews {
          title
        }
      }
    `;

    const { data } = useQuery(LATEST_NEWS);
    const myArticles = data.getNews;
    return myArticles;
  };

  useEffect( () => {
    setArticles(getNews())
  },[])

  console.log(articles)
  return (
    <>
      <Layout page="News" />

      <h1 className="text-xl  text-center text-gray-800 font-bold m-8">
        The latest news about crypto!
      </h1>

      {/* <div className="grid grid-cols-1 gap-3 text-center m-8 md:grid-cols-3">
        {articles.map((article) => (
          <Article key={article.id} article={article} />
        ))}
      </div> */}
    </>
  );
};

export default News;

​

Answer 1

我不太熟悉@阿波罗/客户端，但是useQuery和所有的钩子一样，应该是组件的根。

你也许可以不受状态和影响的影响，比如：

import React from "react";
import { gql, useQuery } from "@apollo/client";

import Layout from "../components/Layout";
import Article from "../components/Article";

const LATEST_NEWS = gql`
  query {
    getNews {
      id
      title
    }
  }
`;

const News = () => {
  const { data } = useQuery(LATEST_NEWS);

  const articles = data.getNews;

  if (!articles) {
    return null; // Or loading, or something else
  }

  return (
    <>
      <Layout page="News" />
      <h1 className="text-xl  text-center text-gray-800 font-bold m-8">
        The latest news about crypto!
      </h1>
      <div className="grid grid-cols-1 gap-3 text-center m-8 md:grid-cols-3">
        {articles.map((article) => (
          <Article key={article.id} article={article} />
        ))}
      </div>
    </>
  );
};

export default News;