我正在學習 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），但這就是控制臺中發生的情況：
我不明白這種行為，有人解釋我哪里做錯了嗎？
uj5u.com熱心網友回復：
useEffect每次重新渲染發生時，您的 2秒都會運行。
在您的useEffect中，您更新狀態變數randomCharacters和totalCharacters. 然后，只要您的 API 由于這些狀態更新而回傳不同的資料，就會發生重新渲染。
所以你的應用程式無限回圈。
至少您需要再添加一個依賴項。[]但在您的情況下，您可以為一次 API 呼叫傳遞空依賴項。
這是來自 React 官方檔案的提示。如果你想運行一個效果并且只清理一次（在掛載和卸載時），你可以傳遞一個空陣列（[]）作為第二個引數。這告訴 React 你的效果不依賴于任何來自 props 或 state 的值，所以它永遠不需要重新運行。這不是作為特殊情況處理的——它直接遵循依賴項陣列的作業方式。
代碼應如下所示：
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)
))
})
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/463201.html
標籤：javascript 反应