React.js编辑页：如何对比初始状态与最终状态实现保存校验

我来帮你解决这个问题！你现在遇到的核心问题是初始状态和修改后的状态指向了同一个引用对象，导致你没法做有效的对比。咱们一步步来修复：

你当前的代码里，父组件直接把this.props.driver赋值给了this.state.driver，而子组件里又直接修改了这个对象的属性（driver['fname'] = event.target.value）。因为JavaScript里对象是引用类型，这就导致你的初始状态和修改后的状态其实是同一个对象——初始状态早就被篡改了，自然没法对比。

我们需要做两件关键的事：

• 保存一份独立的初始状态副本，避免和后续修改的对象共享引用
• 修改子组件的更新逻辑，每次修改时创建新对象，不直接修改原引用

1. 父组件：保存独立的初始状态 #

在构造函数里，对传入的props.driver做深拷贝，把它存为单独的初始状态（比如initialDriver），同时当前状态driver也基于这个拷贝来初始化：

export default class extends Component {
  constructor(props){
    super(props);
    // 深拷贝props.driver，创建独立的初始状态副本
    this.initialDriver = JSON.parse(JSON.stringify(this.props.driver));
    this.state = {
      driver: JSON.parse(JSON.stringify(this.props.driver))
    };
    this.changeDetails = this.changeDetails.bind(this);
  }

  changeDetails = value => {
    this.setState({ driver: value });
  }

  onRegister = () => {
    // 现在可以放心对比初始状态和当前状态了！
    console.log('初始状态:', this.initialDriver);
    console.log('当前状态:', this.state.driver);
    // 比如用JSON.stringify快速对比（复杂对象建议用lodash.isEqual）
    const hasChanges = JSON.stringify(this.initialDriver) !== JSON.stringify(this.state.driver);
    if (hasChanges) {
      // 执行保存逻辑
    } else {
      // 提示没有修改
    }
  }

  render() {
    const { driver } = this.state;
    return (
      <div>
        <EditView driver={driver} changeDetails={this.changeDetails}/>
      </div>
    );
  }
}

2. 子组件：修改时创建新对象 #

子组件里不能直接修改props传来的driver对象（这不仅会污染初始状态，还违反了React的单向数据流原则），要创建一个新对象来更新：

export default class extends Component {
  render() {
    const { driver } = this.props;

    const changeDetails = event => {
      // 创建新对象，复制原有属性，再修改fname
      const updatedDriver = {
        ...driver,
        fname: event.target.value
      };
      this.props.changeDetails(updatedDriver);
    };

    return (
      <div>
        <Input value={driver.fname} onChange={event => changeDetails(event)} />
      </div>
    );
  }
}

• 如果你的driver对象有嵌套结构（比如driver.address.city），JSON.parse(JSON.stringify())可能会有局限性（比如无法处理函数、Date对象等），这时候可以用lodash.cloneDeep来做深拷贝
• 在onRegister里对比对象时，JSON.stringify只适合简单对象，复杂对象建议用lodash.isEqual来做深度对比，避免因为属性顺序不同导致误判

内容的提问来源于stack exchange，提问作者Ahmet Kuşlular