Javascript setState单击未更改名称的按钮时面临的问题

当我点击按钮时，我想把名字从蒙娜丽莎改成利奥·纳多。但它不起作用。怎么办

class Welcome extends Component {
  constructor() {
    super();
    this.statee = {
      name: "Monalisa",
    };
  }

  nameChanger(a) {
    this.setState({ name: a });
  }

  render() {
    return (
      <div>
        <h1>{this.statee.name}</h1>
        <button onClick={this.nameChanger.bind(this, "Leo Nardo")}>
          Click Me
        </button>
      </div>
    );
  }
}

export default Welcome;

类欢迎扩展组件{
构造函数（）{
超级（）；
this.statee={
名字：“蒙娜丽莎”，
};
}
更名者（a）{
this.setState（{name:a}）；
}
render（）{
返回(
{this.statee.name}
点击我
);
}
}
出口默认值欢迎；

您有两次打字错误，

状态

而不是

状态

：

class Welcome extends React.Component {
  state = {
    name: "Monalisa"
  };

  nameChanger(a) {
    this.setState({ name: a });
  }

  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <button onClick={this.nameChanger.bind(this, "Leo Nardo")}>
          Click Me
        </button>
      </div>
    );
  }
}

类欢迎扩展React.Component{
状态={
名字：“蒙娜丽莎”
};
更名者（a）{
this.setState（{name:a}）；
}
render（）{
返回(
{this.state.name}
点击我
);
}
}

this.statee不应更改，是的，我知道我使用了statee not state，这背后有一个原因，所以请给我解决方案如果

this.statee不能更改，什么可以更改？这是一种困惑吗？规则是什么？你能使用正常状态吗？
nameChanger（a）{this.statee.name=a；}
应该做这项工作。虽然设置状态是有原因的；）