太多的重新渲染它怎么会发生在这段代码上？

问题描述

我刚刚开始使用 React，并试图通过创建一个带有按钮的简单页面来练习，该按钮在单击时显示 Modal 组件......但我遇到了一个错误：太多重新-呈现。 React 限制了渲染次数以防止无限循环。 然后我卡在那里，我找不到问题所在。

有人可以帮我吗？

Index.js

import React from 'react';
import ReactDOM from 'react-dom';

import View from './View'

ReactDOM.render(
  <React.StrictMode>
    <View />
  </React.StrictMode>,document.getElementById('root')
);

View.js

import React from 'react';
import Modal from './Modal.js';

const View = () => {
    let [showModal,setModal] = React.useState(false)
    return(
        <>
            {showModal ?? <Modal />}
            <button onClick={setModal(!showModal)}>
                Mostrar modal
            </button>
        </>
    )
}

export default View;

Modal.js

import React from 'react';

const Modal = () => {
    return(
        <div>
            <h1>Modal</h1>
            <p>Mostrando o modal</p>
        </div>
    )
}

export default Modal;

解决方法

当您尝试在此处传递 onClick 处理程序（而不是传递函数调用的返回值）时，您不小心调用了状态更改（递归触发渲染）：

<button onClick={setModal(!showModal)}>

相反，传递一个可以在点击时调用的函数：

<button onClick={() => setModal(!showModal)}>

javascript reactjs reactjs