为什么React调用setState后绑定的样式没有同步更新？

根本原因 #

你定义的style是类的实例属性，仅在组件实例初始化时计算一次，读取的是初始state里的color: "blue"值。后续state更新不会触发该属性重新计算，this.style会一直保留初始值，因此样式不会跟随state更新。

解决方法 #

• 方案1：将style对象移到render方法内部
  每次组件重渲染都会重新执行render方法，此时生成的style对象会读取最新的state值，示例代码如下：

  render() {
    const style = {
      color: this.state.color
    }
    return(
      <div>
        <h1 style={style}>
          The color in this state is {this.state.color}. 
          The number in count is {this.state.count}.
          <button onClick={this.handleIncrement}>
            Increment 
          </button>
        </h1>
      </div>
    );
  }
  

• 方案2：将style改为实例方法，使用时调用该方法获取最新样式

  // 定义改为方法
  getStyle = () => {
    return {
      color: this.state.color
    }
  }
  // render内使用
  <h1 style={this.getStyle()}>
  

另外你当前handleIncrement方法里的第一行this.setState({ count: this.state.count})没有实际修改count的值，属于冗余代码可以直接删除。

修正后完整可运行代码 #

class Practice extends Component {
  state = {
    count: 0,
    color: "blue"
  }

  handleIncrement = () => {
    this.setState({ 
      count: this.state.count + 1, // 可按实际需求调整count更新逻辑，原写法无修改效果
      color: "green"
    });
  }

  render() {
    const style = {
      color: this.state.color
    }
    return(
      <div>
        <h1 style={style}>
          The color in this state is {this.state.color}. 
          The number in count is {this.state.count}.
          <button onClick={this.handleIncrement}>
            Increment 
          </button>
        </h1>
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者Devin