React，componentDidMount中的setState並不總是更改狀態值

Question

我是React的新手，我試圖在頁面渲染后隨機更改狀態屬性之一的值。 但是在componentDidMount中使用setState似乎並非每次都起作用，有時我會返回原始狀態值（永遠不會發生）

我在這里做錯什么嗎？

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

代碼似乎很好，只有第一次您將獲得null下次您將不會獲得null值，像這樣更新后，使用回調函數檢查狀態值。

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

Answer 2

在初始render 后調用componentDidMount您可能沒有注意到setState強制第二次渲染調用快速修復/隱藏了初始狀態。

render console.log(this.state.houseAd)可以證明這一點。

如果您需要在開始時使用sth，請在constructor 。