如何使响应组件在每次状态更改时调用一个函数?

使用此组件,每次更新时都会像往常一样调用getdisplay(因此,当单击变为隐藏时):

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { show: true }
    }
    getDisplay = () => this.state.show ? 'block' : 'none';
    getStyle = () => { { display: this.getDisplay() } }
    render = () => <div style={{ display: this.getDisplay() }} onClick={() => { console.log('clicked'); this.setState({ show: false }) }}>
        <p>TEST</p>
    </div >
}

问题在于: 当我将渲染元素移动到一个数组,然后在渲染函数中返回该数组时,它会工作,但只有在数组初始化时才会调用getdisplay函数,并且不会每次都调用它,因此在这种情况下,单击不会隐藏

class Example extends React.Component {
    array = []
    constructor(props) {
        super(props);
        this.state = { show: true }
        //getDisplay is called here instead of getting called on every render/state change.
        this.array.push(
            <div style={{ display: this.getDisplay() }} onClick={() => { console.log('clicked'); this.setState({ show: false }) }}>
                <p>TEST</p>
            </div >
        )
    }
    getDisplay = () => this.state.show ? 'block' : 'none';
    getStyle = () => { { display: this.getDisplay() } }
    render = () => this.array
}

这是我正在开发的应用程序的一个最简单的例子,我需要保持将HTML元素分开的数组,并使呈现函数返回它。如何在第二个代码示例中的每个状态更改时调用getdisplay? 我希望我能正确地解释它,