React按钮点击后名称未随setState更新问题求助

你的代码里存在一个大小写拼写错误，这是导致点击按钮后名称不变化的核心原因：

在React中，事件处理属性需要使用驼峰命名法，你写的onclick是原生HTML的写法，React无法识别这个属性，因此点击按钮不会触发状态更新逻辑。

修正后的App.js代码如下：

import { Component } from "react";

import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      name: "Juju",
    };
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>Hi {this.state.name}</p>
          <button
            onClick={() => { // 此处改为驼峰式的onClick
              this.setState({ name: "Julie" });
            }}
          >
            Change name
          </button>
        </header>
      </div>
    );
  }
}

export default App;

仅需将按钮的onclick改为onClick，点击按钮后就能正常更新状态，名称会从Juju变为Julie。

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