React中替代componentWillReceiveProps的方法？需仅在新props接收时触发

你碰到的这个问题确实是getDerivedStateFromProps的「特性」——它会在每次组件渲染前触发，不管是props更新还是内部state变化，所以用户输入时调用setState，都会反复触发它，导致表单状态被初始的props对象覆盖，完全没法正常输入。

针对你的模态表单场景，有两个比较合适的解决方案：

方案一：使用componentDidUpdate做props对比 #

这是最直接的方式，你可以在这个生命周期方法里对比更新前后的props，只有当传入的表单初始数据真的变化时，才更新组件内部状态。

示例代码：

class ModalForm extends Component {
  state = {
    formData: { ...this.props.initialFormData } // 初始化时拷贝props数据
  };

  componentDidUpdate(prevProps) {
    // 这里要注意：如果initialFormData是引用类型，浅对比可能不够
    // 比如如果父组件传入的是同一个对象但内部属性变了，需要用深对比
    if (!isEqual(prevProps.initialFormData, this.props.initialFormData)) {
      this.setState({
        formData: { ...this.props.initialFormData }
      });
    }
  }

  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState(prevState => ({
      formData: {
        ...prevState.formData,
        [name]: value
      }
    }));
  };

  render() {
    const { formData } = this.state;
    return (
      <div className="modal-form">
        <input
          name="title"
          value={formData.title || ''}
          onChange={this.handleInputChange}
          placeholder="标题"
        />
        <textarea
          name="content"
          value={formData.content || ''}
          onChange={this.handleInputChange}
          placeholder="内容"
        />
      </div>
    );
  }
}

// 辅助深对比函数（或者用lodash.isEqual）
function isEqual(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) || !isEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
}

关键说明： #

• componentDidUpdate会在组件更新完成后触发，参数prevProps能拿到更新前的props，和当前this.props对比后，再决定是否更新状态。
• 对于引用类型的props（比如你的表单对象），一定要做深对比，否则如果父组件修改了对象内部属性但引用没变，浅对比会认为props没变化，导致状态不更新。

方案二：用key重置组件（更简洁的声明式方案） #

如果你的场景比较简单，React更推荐这种方式：当传入的初始表单数据变化时，给组件设置一个不同的key，这样React会直接卸载旧组件，重新挂载新组件，组件的状态会自动用新的props初始化，不需要手动处理生命周期。

示例代码（父组件中使用）：

// 父组件里渲染模态表单
<ModalForm
  initialFormData={currentItem}
  key={JSON.stringify(currentItem)} // 用数据的字符串作为key
/>

关键说明： #

• 当currentItem变化时，key也会跟着变化，React会把这个组件当成全新的组件来渲染，此时ModalForm的state会重新用新的initialFormData初始化，完美避免了状态覆盖的问题。
• 这种方式代码更简洁，符合React的声明式思维，适合不需要保留中间状态的场景（比如每次打开模态框都是全新的表单）。

总结 #

如果需要在组件更新过程中做一些额外的逻辑处理，选componentDidUpdate；如果只是需要在props变化时重置表单状态，用key重置组件会更省心。

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