使用 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();
}, []);

Snippet of Code Causing Error

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

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 的响应是随机引用，所以你必须根据 quote1 的值来处理它。这应该可行，因为 quote1 只会在组件挂载后更新（当值为空字符串时），并且下面的渲染不会更新状态，所以 useEffect 不会无限循环。

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

如果 API 响应是静态的，因为依赖数组中的项目只有在从当前值更改时才会导致重新渲染，所以它只会在第一次状态更新后立即导致重新渲染。

Answer 2

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

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

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

示例：useEffect(() { code here }, [WATCH SPECIFICALLY THIS AND RUN ON WHEN UPDATES])。

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

您的应用程序中的某些东西一定会触发您的 useEffect() 钩子在您不希望它运行时运行。