使用 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() 掛鈎運行。