Javascript console.log中的值与DOM中的值不同

我有以下内容：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEnabled: 'yes',
    };
  }

  render() {
    console.log(this.state.isEnabled);

    return (
      <div className="rd-pills rd-pills--fullwidth">
        {this.state.isEnabled}
        <input
          id="referral-disabled"
          className="rd-pills__input"
          onClick={() => this.setState({ isEnabled: 'no' })}
        />
        <label
          htmlFor="referral-disabled"
          className="rd-pills__pill rd-pills__pill--half"
        >
          Disable
        </label>
        <button onClick={() => this.setState({ isEnabled: 'no' })}>
          Disable
        </button>
      </div>
    );
  }
}

export default MyComponent;

import React，{Component}来自'React'；
类MyComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
我回答：“是的”，
};
}
render（）{
console.log（this.state.isEnabled）；
返回(
{this.state.isEnabled}
this.setState（{isEnabled:'no'}）}
/>
使残废
this.setState（{isEnabled:'no'}）}>
使残废
);
}
}
导出默认MyComponent；

如果我单击按钮

console.log（this.state.isEnabled）

返回

no

，并且

{this.state.isEnabled}

的计算结果为

no

如果我单击输入控制台.log（this.state.isEnabled）返回

否

并且

{this.state.isEnabled}

的计算结果为

是

。（初始状态）

第二种情况是

调试器

还表示

this.state.isEnabled

是

no

---

这怎么可能？为什么在相同的渲染周期中，DOM中的值和状态变量不同？

使用

true

和

false

。我已经尝试过了。它不能解决我的问题。在本例中，我使用字符串只是为了显示DOM中的差异。它实际上总是返回“否”，除了第一个rendern没有得到您所描述的问题外，请参见

jsfiddle

其工作正常：