Реагируйте, setState в componentDidMount не всегда меняет значение состояния

Question

Я относительно новичок в React и пытаюсь произвольно изменить значение одного из моих свойств состояния после рендеринга страницы.Но использование setState в componentDidMount, кажется, не работает каждый раз, иногда я возвращаю исходное значение состояния (что никогда не должно происходить)

Есть ли что-то, что я делаю здесь неправильно;

constructor(props) {
    super(props);

    this.state = {
        houseAd: null
    };
}

и затем setState

componentDidMount() {
    const houseAds = ['ad1', 'ad2'];
    const rand = houseAds[Math.floor(Math.random() * houseAds.length)];

    this.setState({
        houseAd: rand
    });
}

Иногда я получаю одно или другое из моего массива houseAds, но иногда оно просто возвращает null

Затем в моем рендере я просто делаю что-то простое, например:

let ad;
if (this.state.houseAd === 'ad1') {
    ad = 'Ad1';
}
if (this.state.houseAd === 'ad2') {
    ad = 'Ad2'
}

Но, очевидно, когда значение состояния равно null, ничего не появляется

Answer 1

componentDidMount вызывается после initial render - вы, вероятно, этого не заметили - второй вызов рендеринга принудительно setState быстро исправляет / скрывает исходное состояние.

console.log(this.state.houseAd) в render, чтобы доказать это.

Если вам нужно sth при запуске - сделайте это в constructor.

Answer 2

Код, кажется, в порядке, только в первый раз вы получите null, когда в следующий раз вы не получите нулевые значения, проверьте значение состояния с помощью функции обратного вызова после такого обновления.

this.setState({
    houseAd: rand
}, ()=> {console.log(this.state.houseAd});