Question

我想知道为什么一旦设置了它的值来自后端API，它就会卡在无限渲染中。 我不想使用useEffect（）停止它，因为我需要在分配值后使用它重新渲染

代码：

import React, { useState, useEffect } from 'react';
// import FormCheckLabel from 'react-bootstrap/FormCheckLabel';
import './CheckForms.css';
// import Scrollspy from '../Scrollspy/Scrollspy';
import axios from 'axios';

const CheckForms = () => {
    const [menu, setMenu] = useState([]);
    const fetchList = async () => {
        try {
            const res =  await axios.get(`http://localhost:5000/api/items`);
            const list =  res.data.response;    
            // setMenu(list); // <-- This is causing ulimited renders ! //
        } catch (err) {
            console.log(err.response);
        };
    };
    fetchList();
    console.log("something"); 
    return (
        <div>    
        </div>
    )
}

export default CheckForms;

我非常感谢您的帮助。谢谢。

Answer 1

您不能将fetchList();放在useEffect()之外，因为，

在安装组件时，将调用fetchList()，它会设置状态并重新发布组件。

再次执行

fetchList()，然后再次设置状态，并且再次重新渲染。它形成一个无限循环。

你必须做 useEffect(()=>fetchList(),[]) 或在事件上执行

Answer 2

为此您需要useEffect。否则，每次重新渲染时都会调用fetchList。

所以您的无限循环来自：

fetchList() => setMenu() => render() => fetchList() => setMenu()，依此类推...

我不想使用useEffect（）停止它，因为我需要使用它来重新赋值后呈现

useEffect(callback, [triggers])的第二个参数正是为此而来的，它根据道具/状态更改来控制何时应进行重新渲染

反应钩子setState导致无限渲染

2 个答案: