React hook setState вызывает бесконечные рендеры

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() выполняется и снова устанавливает состояние и снова выполняет повторную визуализацию. он образует бесконечное l oop.

вы должны сделать useEffect(()=>fetchList(),[]) или выполнить его в событии

Answer 2

для этого нужно useEffect. В противном случае fetchList будет вызываться при каждом повторном рендеринге.

Итак, ваш бесконечный l oop происходит от:

fetchList() => setMenu() => render() => fetchList() => setMenu() и так далее ...

Я не хочу останавливать его с помощью useEffect (), поскольку мне нужно использовать его для повторного рендеринга после присвоения значений

useEffect(callback, [triggers]) второй параметр здесь именно для этого, контроль, когда должен произойти повторный рендеринг, на основе изменений свойств / состояния