React JS类组件中使用state时出现错误求助

1. 正确的State初始化方式 #

类组件中初始化state有两种标准写法：

方式一：构造函数内初始化 #

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 在构造函数内初始化state
    this.state = {
      count: 0,
      username: ""
    };
  }
  
  render() {
    return <div>当前计数：{this.state.count}</div>;
  }
}

方式二：类属性直接初始化（ES6+语法） #

class MyComponent extends React.Component {
  // 直接在类中定义state属性
  state = {
    count: 0,
    username: ""
  };
  
  render() {
    return <div>当前计数：{this.state.count}</div>;
  }
}

2. 常见错误排查与修复 #

• 禁止直接修改state：不能直接给this.state赋值，必须用setState()更新：

  // 错误写法
  this.state.count = 1;
  
  // 正确写法
  this.setState({ count: 1 });
  

• 访问state必须加this.：如果错误提示'state' is not defined，说明你直接写了state而非this.state，修正为：

  // 错误写法
  render() {
    return <div>{state.count}</div>;
  }
  
  // 正确写法
  render() {
    return <div>{this.state.count}</div>;
  }
  

• 事件函数绑定this：如果事件处理中访问this.state报错，用箭头函数自动绑定this：

  class MyComponent extends React.Component {
    state = { count: 0 };
    
    handleAdd = () => {
      this.setState({ count: this.state.count + 1 });
    };
    
    render() {
      return <button onClick={this.handleAdd}>点击加1</button>;
    }
  }
  

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