在 React 15 中，这个问题的核心在于 componentWillReceiveProps 生命周期中无条件地将新 props 同步到 state，导致用户修改的本地状态被覆盖。要解决这个问题，需要改变同步策略：只在必要的时候（例如数据源切换）才重置 state，否则保留用户已修改的状态。
下面提供几种可行的方案，你可以根据场景选择。
方案一：基于关键字段的条件同步
如果你的 props 中有一个唯一标识（如 dataId），表示当前数据源。当这个标识发生变化时，说明用户切换了数据源，应该重置 state；否则保留用户修改。
class MyComponent extends React.Component {constructor(props) {super(props);// 初始化时从 props 同步到 statethis.state = {...props.initialData, // 假设初始数据isDirty: false, // 可选：记录用户是否修改过};}componentWillReceiveProps(nextProps) {// 只有当数据源 ID 发生变化时才重置 stateif (nextProps.dataId !== this.props.dataId) {this.setState({...nextProps.initialData,isDirty: false,});}// 否则不做任何事，保留用户修改的 state}handleChange = (key, value) => {this.setState({[key]: value,isDirty: true, // 标记用户已修改});};render() {// 渲染逻辑...}
}
关键点
- 通过对比
dataId判断是否真的是新数据。 - 如果仅仅是 session 更新导致父组件重绘，而
dataId未变，则setState不会被调用，用户修改得以保留。
方案二：利用 isDirty 标志忽略后续 props 更新
如果你希望一旦用户修改过 state，就完全不再受 props 影响（除非外部强制重置），可以使用一个标志位。
class MyComponent extends React.Component {constructor(props) {super(props);this.state = {...props.initialData,isDirty: false,};}componentWillReceiveProps(nextProps) {// 如果用户已经修改过 state，则忽略所有 props 更新if (!this.state.isDirty) {// 未修改时，可以更新 statethis.setState({...nextProps.initialData,isDirty: false,});}// 否则什么都不做}handleChange = (key, value) => {this.setState({[key]: value,isDirty: true,});};
}
适用场景
- 希望用户一旦开始编辑，数据就完全本地化，不再随外部 props 变化。
- 如果需要提供“重置”功能，可以暴露一个方法手动清空
isDirty并重新同步 props。
方案三：完全受控 + 状态提升
如果可能，更好的做法是将 state 的管理提升到父组件，子组件只负责展示和触发修改回调，这样父组件可以自由决定何时更新数据，子组件完全受控，不会有“同步”冲突。
// 父组件
class Parent extends React.Component {state = {data: props.initialData, // 从外部获取初始数据};handleDataChange = (newData) => {this.setState({ data: newData });};render() {return (<MyComponentdata={this.state.data}onDataChange={this.handleDataChange}/>);}
}// 子组件
class MyComponent extends React.Component {handleChange = (key, value) => {// 直接通过回调更新父组件的 statethis.props.onDataChange({...this.props.data,[key]: value,});};render() {// 直接使用 this.props.data 渲染// 不需要本地 state 存储数据}
}
优点
- 数据流清晰，不存在同步问题。
- 当 session 更新导致父组件重新渲染时，父组件依然保留着用户修改后的数据（因为数据已经提升到父组件的 state 中）。
方案四：使用 key 强制重置
如果某些情况下你确实希望重新创建组件来重置状态，可以给组件添加一个 key 属性，当需要重置时改变 key 值。但这不是保留用户修改的方案，而是相反，仅作补充说明。
<MyComponent key={someUniqueId} {...props} />
总结
- 推荐方案一或方案二：在
componentWillReceiveProps中加入条件判断，避免盲目覆盖用户修改的状态。 - 如果可能，考虑方案三：将数据提升到父组件或状态管理库（如 Redux），让子组件变成纯粹的受控组件，彻底避免本地 state 与 props 的同步困扰。
- React 15 中没有
getDerivedStateFromProps，但上述条件判断的方式同样有效，并且是官方推荐的“避免将 props 复制到 state 反模式”的解决办法。
选择哪种方案取决于你的业务需求：是希望保留用户修改直到数据源切换，还是一旦编辑就不再受外部影响。