為什么我的 React 應用程序中有一個循環？

Question

我正在學習 React，我正在制作我的應用程序來測試庫，但我有一個奇怪的循環，我不知道它是從哪里來的。

我的代碼：

import React, {useEffect, useState} from 'react';
import Navigation from "../components/Navigation";
import axios from "axios";
import Card from "../components/Card";
import {randomNumber} from "../components/_helper";

const Home = () => { 
    console.log('coucou')

    const [randomCharacters, setRandomCharacters] = useState([]);
    const [totalCharacters, setTotalCharacters] = useState('');
    const [randomNumbers, setRandomNumbers] = useState('');


    useEffect(() => {
        axios.get('https://rickandmortyapi.com/api/character')
            .then((response) => {
                setTotalCharacters(response.data.info.count)
            })
    })

    useEffect(() =>{
        axios.get('https://rickandmortyapi.com/api/character/1,23,45,654,21,12')
            .then((response) => {
                response.data.map(() => (
                    setRandomCharacters(response.data)
                ))
            })
    })
    return (
        <div>
            <Navigation/>
            {randomCharacters.map( (character) => (
                <Card key={character.id} character={character}/>
            ))}
        </div>
    );
};

export default Home;

如您所見，我在代碼的開頭做了一個 console.log 並且我沒有循環寫入（for，foreach），但這是控制台中發生的事情：

我不明白這種行為，有人來解釋我哪里做錯了嗎？

Answer 1

每次重新渲染時，您的 2 個useEffect運行。

在您的useEffect中，您更新了 state 個變量randomCharacters和totalCharacters 。 然后，只要您的 API 由於這些 state 更新而返回不同的數據，就會重新呈現。

所以你的應用程序無限循環。

至少你需要添加一個依賴。 但在您的情況下，您可以通過空依賴項[]進行一次 API 調用。

這是來自 React 官方文檔的提示。 如果你想運行一個效果並只清理一次（在掛載和卸載時），你可以傳遞一個空數組 ([]) 作為第二個參數。 這告訴 React 你的效果不依賴於 props 或 state 的任何值，所以它永遠不需要重新運行。 這不是作為特殊情況處理的——它直接遵循 dependencies 數組的始終工作方式。

代碼應如下所示：

    useEffect(() => {
        axios.get('https://rickandmortyapi.com/api/character')
            .then((response) => {
                setTotalCharacters(response.data.info.count)
            })
    }, [])

useEffect(() =>{
        
    axios.get('https://rickandmortyapi.com/api/character/1,23,45,654,21,12')
            .then((response) => {
                response.data.map(() => (
                    setRandomCharacters(response.data)
                ))
            })
    }, [])