React组件中如何仅在state.data变更时触发确认模态框？

你代码中的核心问题 #

1. componentDidUpdate参数顺序错误：该生命周期函数的第一个参数是prevProps，第二个是prevState，你写反了参数顺序，导致对比的对象完全错误。
2. state修改违反不可变原则：如果修改state.data时直接修改原对象（比如this.state.data.nameLot = 'xxx'），会导致prevState.data和当前this.state.data指向同一个引用，即使属性值变了，JSON.stringify的结果也会相同。
3. JSON.stringify并非可靠深对比方式：它会忽略undefined、函数，且数组顺序变化时也会判定为不同，存在误判可能。

通用解决方案 #

根据你的需求（组件关闭时，仅当data有修改才触发确认框），推荐两种实现方式：

方式一：记录初始状态，关闭时一次性对比

这种方式更高效，仅在用户触发关闭操作时检查变化：

1. 保存初始data副本

componentDidMount() {
  // 深拷贝初始state.data，避免后续修改影响初始值
  this.initialData = JSON.parse(JSON.stringify(this.state.data));
}

2. 关闭时对比当前状态与初始状态

handleClose = () => {
  const currentDataStr = JSON.stringify(this.state.data);
  const initialDataStr = JSON.stringify(this.initialData);
  
  if (currentDataStr !== initialDataStr) {
    // 弹出确认模态框
    this.setState({ showConfirmModal: true });
  } else {
    // 无修改，直接关闭组件
    this.props.onClose();
  }
}

方式二：实时标记修改状态

如果需要实时感知data变化（比如修改后立即做某些处理），可以用这种方式：

1. 新增状态标记是否修改

state = {
  language: 'rus',
  showFile: true,
  showStopButton: false,
  showPeretojka: false,
  hasModified: false, // 新增标记
  data: { /* 你的data结构 */ }
}

2. 修正componentDidUpdate逻辑，添加可靠深对比

componentDidUpdate(prevProps, prevState) {
  // 对比前后state.data是否变化
  if (!this.deepEqual(prevState.data, this.state.data)) {
    this.setState({ hasModified: true });
  }
}

// 自定义深对比函数（替代JSON.stringify）
deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  
  for (const key of keys1) {
    if (!keys2.includes(key) || !this.deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
}

3. 关闭时根据标记判断是否触发确认框

handleClose = () => {
  if (this.state.hasModified) {
    this.setState({ showConfirmModal: true });
  } else {
    this.props.onClose();
  }
}

关键注意事项 #

修改state.data时必须遵循React不可变原则，必须创建新对象/数组：

// 错误写法：直接修改原对象
this.state.data.nameLot = '新名称';
this.setState({ data: this.state.data });

// 正确写法：创建新对象
this.setState(prevState => ({
  data: {
    ...prevState.data,
    nameLot: '新名称'
  }
}));

// 修改数组时同样要创建新数组
this.setState(prevState => ({
  data: {
    ...prevState.data,
    position: [...prevState.data.position, newItem]
  }
}));

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