时间戳

首页 > 解决方案 > 使用钩子会导致无限循环

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.

我怎样才能解决这个问题 ？

标签： reactjs

解决方案

看起来您的意思是将handleVisibility函数作为onOkandonCancel道具传递给 Modal 组件，但您不小心用括号调用它()。

这意味着当组件第一次渲染时，它会调用该函数，该函数会更改状态，这会触发重新渲染，然后再次调用该函数，依此类推。

推荐阅读