React子组件state中props未定义报错求助

嘿，这个问题我之前也踩过坑！其实核心原因很明确：类组件的实例属性（包括你直接写的state={...}）会在组件的constructor执行之前就完成初始化，这时候组件还没完成props的绑定，this.props还是undefined，所以直接写value: this.props.value就会触发读取undefined的value属性的错误。而render函数是在组件挂载流程的后期执行的，这时候props已经正常传递进来了，所以console.log能正常打印出props内容。

至于你说教程里相同代码能运行，大概率是教程的写法和你有细微差别——比如他们可能是在constructor里初始化state，并且调用super(props)了：

class Counter extends Component {
  constructor(props) {
    super(props); // 必须传递props，否则constructor里this.props也是undefined
    this.state = {
      value: this.props.value
    };
  }
  // ...其他代码
}

下面给你几个可行的解决方案，按需选择：

方案一：用constructor初始化state并同步props更新 #

如果你确实需要把props的值存到组件自己的state里（比如要在组件内部独立修改这个值），可以这么写：

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value
    };
  }

  // 当父组件传递的props更新时，同步更新组件内部state
  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      this.setState({ value: this.props.value });
    }
  }

  render() { 
    console.log("props", this.props)
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button onClick={this.handleIncrement} className="btn btn-secondary">Increment</button>
      </div>
    );
  }

  formatCount() {
    return this.state.value === 0 ? 'Zero' : this.state.value;
  }
}

方案二：直接使用props，不存到state里 #

如果这个value只是用来展示，不需要在Counter组件内部修改（比如Increment按钮是要通知父组件更新数据源），那更推荐直接用props，完全不需要维护组件内部state：

class Counter extends Component {
  render() { 
    console.log("props", this.props)
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount(this.props.value)}</span>
        <button onClick={this.handleIncrement} className="btn btn-secondary">Increment</button>
      </div>
    );
  }

  formatCount(count) {
    return count === 0 ? 'Zero' : count;
  }
}

这种写法不仅避免了报错，还能保证组件数据和父组件完全同步，不会出现数据不一致的问题，是更符合React数据流理念的写法。

方案三：用箭头函数延迟初始化state（不推荐但可用） #

如果你不想写constructor，也可以用立即执行的箭头函数来延迟初始化逻辑，这样就能拿到this.props了：

class Counter extends Component {
  state = {
    value: (() => this.props.value)()
  };

  render() { 
    console.log("props", this.props)
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button onClick={this.handleIncrement} className="btn btn-secondary">Increment</button>
      </div>
    );
  }
}

不过这种写法可读性不高，而且同样需要手动处理props更新的同步问题，所以还是前两种方案更靠谱。

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