React构造函数中如何根据条件设置state属性初始值

算力阿峰

2026-8-27

React类组件条件初始化state的正确实现

核心逻辑说明

componentDidMount中设置state无法在首次加载前生效的核心原因是生命周期触发时机不匹配：

componentDidMount 执行时组件已经完成首次渲染、挂载到真实DOM上，此时调用setState会触发二次重渲染，页面会先展示A:0的默认值，再跳转到目标值，无法做到加载过程中完成赋值。
构造函数是类组件实例化时第一个执行的逻辑，远早于组件渲染流程，构造函数内不需要调用setState，直接计算好初始值赋值给this.state即可，赋值结果会直接作为首次渲染的初始值，完全在页面加载过程中生效，不会出现渲染后更新的问题。
类组件不存在比构造函数更早、能在首次渲染前修改state的生命周期钩子，构造函数初始化是首次渲染前设置state的唯一合法位置。

原有逻辑的注意点

原条件判断中a !== 'undefined'是判断值是否等于字符串'undefined'，如果要校验变量是否为undefined类型，需要去掉引号，写成typeof a !== 'undefined'或者直接a !== undefined，否则会出现判断逻辑错误。
如果两个判断分支均不成立，可根据业务需求将A的默认值设置为0、null或其他空值。

完整实现代码

constructor(props) {        
  super(props)
  // 提前计算属性A的初始值，默认值设为0
  let initialA = 0;
  // 若a、b来自组件入参，需从props中取值，即props.a、props.b
  if (a !== null && a !== undefined) {
    initialA = a
  } else if (b !== null && b !== undefined) {
    initialA = b
  }

  this.state = {
    A: initialA
  }
}