Использование перехватов приводит к бесконечному циклу

#reactjs

Вопрос:

У меня есть модальный компонент, который должен появляться только один раз, когда пользователь открывает веб-сайт. Вот мой код:

 import React, { useState } from 'react';
import { Modal, Button } from 'antd';

function WelcomeModal() {

    const [visibility, setVisibility] = useState(true);

    function handleVisibility() {
        setVisibility(!visibility);
    }

    return (
        <div>
           <Modal
            title="Vertically centered modal dialog"
            centered
            visible={visibility}
            onOk={handleVisibility()}
            onCancel={handleVisibility()}
           ></Modal>
        </div>
    )
}

export default WelcomeModal;

Я создал состояние с именем visibility , которое изначально является true, после того, как пользователь нажимает на Cancel или OK на модальное, я пытаюсь изменить видимость на false, чтобы модальное закрывалось. Проблема в том, что я получаю следующую ошибку:

 Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Как я могу это исправить?

1. Вы имеете в виду передать Modal компоненту эти ссылки на функции, а не вызывать их во время рендеринга. Удалите () из каждого — onOk={handleVisibility} . Вызов функции во время рендеринга обновляет состояние = бесконечный цикл.

Ответ №1:

Похоже, вы хотите передать handleVisibility функцию в модальный компонент в качестве реквизитов onOk и onCancel , но вы случайно вызываете ее со скобками () .

Это означает, что при первом рендеринге компонента он вызывает функцию, которая изменяет состояние, что запускает повторный запуск, который затем вызывает функцию снова и так далее.