REACTJS Ошибка: слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

Question

Я получаю некоторые значения из серверной части, но я хочу преобразовать их в интерфейс. Я сделал Switch, однако, он дает эту ошибку, которая появляется в названии. Я также пробовал с if, но он выдал ту же ошибку.

Если у вас есть другой способ сделать это, я также принимаю советы.

Код:

export default function Notification() {
    const { guid } = useParams();

    const [appcodeValue, setAppcodeValue] = useState(null);
    const [notify, setNotify] = useState([]);

    function fetchNotifications() {
        setLoading(true);

        api
            .get(`/v1/admin/announcements/${guid}`)
            .then(({ data: notifications }) => {
                setNotify(notifications);
            })
            .catch(() => {
                setError(`Desculpe, não foi possivel carregar a notificação.`);
            })
            .finally(() => {
                setLoading(false);
            });
    }

    useEffect(() => {
        fetchNotifications();
    }, []);

    if (loading) {
        return (
            <Center>
                <Loading size="40" />
            </Center>
        );
    }

    switch (notify.appcode) {
        case 0:
            return setAppcodeValue('Todos');
            break;
        case 1:
            return setAppcodeValue('Associados');
            break;
        case 2:
            return setAppcodeValue('Não Associados');
            break;
        default:
            break;
    }

    return (
        <>
            <CardAppcode>
                Appcode
                        {!loading && notify ? <p>{appcodeValue}</p> : []}
            </CardAppcode>
        </>
    )
}

Answer 1

1 - При таком подходе вы вызываете setAppCode() в момент рендеринга компонента. Так как это функция useState, она выполняет повторную визуализацию компонента. Затем он перерисовывается и снова вызывает setAppCode() (бесконечно l oop).

2 - (просто чтобы прояснить) Так как вы используете http-запрос, вы сможете получать уведомления только от серверной части, если вы об этом попросите. Вы спрашиваете об этом только один раз (в момент рендеринга компонента (используя useEffect)). Для того, чтобы уведомления обновлялись динамически, вы должны использовать некоторую систему pushNotifications.

3 - Ваша переменная уведомления является массивом. Так что вы не можете просто получить доступ к уведомлению о собственности. Вам нужно получить доступ к одному из объектов, который находится внутри вашего массива, в моем примере я получу доступ к первому.

Чтобы решить его, я бы просто вызвал ваш оператор switch после запроса API:

api.get(`/v1/admin/announcements/${guid}`)
            .then(({ data: notifications }) => {
                setNotify(notifications);
                switch (notify[0].appcode) {
                    case 0:
                        return setAppcodeValue('Todos');
                        break;
                    case 1:
                        return setAppcodeValue('Associados');
                        break;
                    case 2:
                        return setAppcodeValue('Não Associados');
                        break;
                    default:
                        break;
                }
            })

Espero ter ajudado:)

Answer 2

Оберните ваш switch блок за пределами useEffect с [notify] триггером

---

 useEffect(()=> notify &&
   switch (notify.appcode) {
    case 0:
        return setAppcodeValue('Todos');
        break;
    case 1:
        return setAppcodeValue('Associados');
        break;
    case 2:
        return setAppcodeValue('Não Associados');
        break;
    default:
        break;
},[notify])

Answer 3

Я создал функцию, которая получает значение по параметру, и использует это значение для анализа того, какая из категорий подходит

export default function Notification() {
    const { guid } = useParams();

    const [appcodeValue, setAppcodeValue] = useState(null);
    const [notify, setNotify] = useState([]);

    function fetchNotifications() {
        setLoading(true);

        api
            .get(`/v1/admin/announcements/${guid}`)
            .then(({ data: notifications }) => {
                setNotify(notifications);
            })
            .catch(() => {
                setError(`Desculpe, não foi possivel carregar a notificação.`);
            })
            .finally(() => {
                setLoading(false);
            });
    }

    useEffect(() => {
        fetchNotifications();
    }, []);

    if (loading) {
        return (
            <Center>
                <Loading size="40" />
            </Center>
        );
    }

    function verifyValue(value) {
        switch (value) {
            case 0:
                return 'Todos'
                break;
            case 1:
                return 'Associados'
                break;
            case 2:
                return 'Não Associados'
                break;
            default:
                break;
        }
    }

    return (
        <>
            <CardAppcode>
                Appcode
                        {!loading && notify ? <p>{verifyValue(notify.appcode)}</p> : []}
            </CardAppcode>
        </>
    )
}