Как заставить компонент React вызывать функцию при каждом изменении состояния?

Question

С этим компонентом 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, отдельно и сделать так, чтобы функция render возвращала его. Как я могу заставить getDisplay вызываться при каждом изменении состояния во втором примере кода? Надеюсь, я все правильно объяснил,_,

Answer 1

Проблема в том, что this.array статичен На строительстве вы создаете массив и никогда не пересматриваете его. Вместо построения JSX в конструкторе, заполните массив данными, а затем отобразите его при рендеринге.

render: () => this.array.map(item => (
  /* JSX for each item goes here. */
))

Обратите внимание, что б / с this.array не указано, добавление нового элемента не приведет к его автоматическому обновлению. Если вы хотите такое поведение, убедитесь, что вы: a) сохраняете его как состояние (например, this.state = { show: true, array: [] }) и б) не изменяйте его (т.е. не используйте .pushиспользовать .concat).