React中如何基于先前状态值正确设置新的state值

API 探路者

2026-8-29

问题原因

你的代码有两类错误直接触发报错：

语法错误：this.state是普通JS对象，对象属性之间必须用逗号分隔，你在lastName: 'abc'后面写了分号，会直接导致JS解析失败。
取值逻辑错误：在定义this.state对象的过程中，对象还未完成初始化，当前作用域下根本不存在firstName、lastName这两个独立变量，直接引用会报变量未定义的错；而this.firstName、this.lastName的写法也不对，这两个值是存放在this.state属性下的，不是直接挂载在组件实例上，这么写只会取到undefined。

正确实现方案

根据你的使用场景选对应写法即可：

仅初始化时需要计算fullName
如果你只是初始化阶段要生成fullName，后续两个名字字段不会动态更新，可以先把初始值存为局部变量再赋值给state：

class MyComp extends React.Component {
  constructor(props) {
    super(props);

    const firstName = 'xyz';
    const lastName = 'abc';
    this.state = {
      firstName,
      lastName,
      fullName: `${firstName} ${lastName}` // 建议加空格分隔姓和名
    };
  }
}

名字字段后续会动态更新（推荐写法）
不要把可通过现有state计算得到的值存在state中，这是React state使用的基本原则，避免后续更新字段时忘记同步fullName导致数据不一致。直接在render阶段根据最新state计算即可：

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: 'xyz',
      lastName: 'abc'
    };
  }

  render() {
    // 每次渲染都会自动拿到最新的state计算，不需要手动同步
    const fullName = `${this.state.firstName} ${this.state.lastName}`;
    return <div>用户名：{fullName}</div>;
  }
}

必须把派生值存在state中的更新场景
如果你确实有特殊需求需要把fullName存在state里，后续更新state时必须用函数式更新，避免React异步更新state导致拿到旧值：

// 举个例子：点击按钮修改firstName
handleChangeName = () => {
  // 给setState传函数，参数prevState是保证为最新的上一轮状态
  this.setState(prevState => {
    const newFirstName = 'newXyz';
    return {
      firstName: newFirstName,
      fullName: `${newFirstName} ${prevState.lastName}`
    }
  })
}

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