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

代码似乎很好，只有第一次您将获得null，下次您将不会获得空值，像这样更新后，请使用回调函数检查状态值。

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

Answer 2

componentDidMount在初始render之后被称为-您可能没有注意到-setState强制第二次渲染调用快速修复/隐藏了初始状态

console.log(this.state.houseAd) in render中来证明这一点。

如果需要一开始，请在constructor中进行操作。

React，componentDidMount中的setState并不总是更改状态值

2 个答案: