使用 Axios 和 useState/useEffect 无限重新渲染 React 功能组件？

Question

我正在尝试使用 Typescript 创建一个 React 功能组件，它将从 API 获取数据，然后将该数据发送到另一个组件，但是，我收到错误消息“错误：重新渲染次数过多。React 限制了渲染次数以防止无限循环。”

请提供任何建议！

useEffect(() => {
    await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random').then((resp) => {
            setQuote1(resp.data.data[0]);
        });
    getQuote();
}, []);

导致错误的代码片段

编辑：这是发生错误的整个文件。

import React, { useEffect, useState } from 'react';
import { Row, Col, CardGroup } from 'reactstrap';
import axios from 'axios';

import QuoteCard from './QuoteCard';

const MainQuotes = () => {
    const [quote1, setQuote1] = useState();

    useEffect(() => {
        await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random').then((resp) => {
                setQuote1(resp.data.data[0]);
            });
        getQuote();
    }, []);

    return (
        <Row>
            <Col>
                <CardGroup>
                    <QuoteCard quoteData={quote1} />
                </CardGroup>
            </Col>
        </Row>
    );
};

export default MainQuotes;

Answer 1

根据 quote1 的类型（我假设它是一个字符串）更新为：

const [quote1, setQuote1] = useState('')

useEffect(() => {
  function fetchQuote() {
    await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random')
    .then((resp) => {
      setQuote1(resp.data.data[0]);
    });
  }  
  if (!quote1) {
    fetchQuote();
  }
}, []);

因为API的response是随机报价，所以要根据quote1的值来处理。 这应该可以工作，因为 quote1 只会在组件安装后更新（当值为空字符串时），并且以下渲染不会更新 state，因此useEffect不会无限循环。

在编辑之前，我假设 axios 请求在 getQuote function 的内部。我更新了我的答案以反映您发布的代码。

如果 API 响应是 static，因为依赖项数组中的项目只有在它们的当前值发生变化时才会导致重新渲染，所以它只会在第一次 state 更新后立即导致重新渲染。

Answer 2

我们可以得到你的完整代码吗？ 看来问题出在您的 state 挂钩上，并弄清楚它到底在做什么。

我现在的猜测是你的 state 挂钩“setQuote1”正在以导致重新渲染的方式被调用，然后会再次调用你的 useEffect() （因为 useEffect 在渲染周期结束时运行）因此，调用再次在您的 setQuote1 挂钩上。 这无限期地重复。

useEffect() 允许依赖关系，并让您能够准确判断何时应调用 useEffect()。

示例：useEffect(() { code here }, [特别注意这个并且仅在更新时运行])。

当您将依赖项数组留空时，您告诉挂钩在任何更新 state 时运行。这不一定是坏事，但在某些情况下，您只希望 useEffect() 在特定 state 更新时运行。

您的应用程序中的某些东西必须在您不希望它运行时触发您的 useEffect() 挂钩运行。