ComponentWillReceiveProps更新API获取的Props，如何恢复原Props？

看起来你遇到的问题是：组件从API获取的props被后续更新覆盖了，想要找回最初的那份原始数据对吧？下面给你几个可行的方案：

1. 保存原始API数据到组件State #

既然props是外部传入的（看起来你用了Redux这类状态管理工具），组件本身没法直接修改props，那我们可以在第一次拿到API返回的props时，把它存到组件自己的state里作为原始副本。这样不管后续props怎么变化，你都有一份备份可以随时恢复。

修改你的代码如下：

constructor(props) {
  super(props);
  this.state = {
    filtered_chart_data: {},
    original_chart_data: {} // 新增状态存储原始API数据
  };
  props.getEngagementInfo();
  props.getChartData();
}

componentDidMount() {
  // 组件挂载时如果API数据已经返回，直接保存原始数据
  if (!_.isEmpty(this.props.diagnose.chart_data)) {
    this.setState({ original_chart_data: this.props.diagnose.chart_data });
  }
}

componentWillReceiveProps(nextProps) {
  // 第一次拿到API返回的chart_data时，保存原始副本
  if (!_.isEmpty(nextProps.diagnose.chart_data) && _.isEmpty(this.state.original_chart_data)) {
    this.setState({ original_chart_data: nextProps.diagnose.chart_data });
  }

  // 你的原有业务逻辑可以继续保留，比如处理filtered_chart_data
  const lastSavedCharts = this.state.filtered_chart_data;
  if (!_.isEmpty(nextProps.diagnose.chart_data)) {
    if (_.isEmpty(this.state.filtered_chart_data)) {
      // 用原始数据初始化过滤后的状态，而不是直接用最新props
      this.setState({ filtered_chart_data: this.state.original_chart_data });
    } else {
      // 这里写你原来的其他处理逻辑...
    }
  }
}

2. 添加恢复功能 #

当你需要恢复到原始API数据时，只需要把保存的original_chart_data重新赋值给业务状态；如果需要同步回外部状态管理（比如Redux），可以调用对应的action：

// 恢复原始数据的方法
restoreOriginalData = () => {
  // 恢复组件内的过滤状态到原始数据
  this.setState({ filtered_chart_data: this.state.original_chart_data });
  
  // 如果需要更新Redux中的props数据（假设你有对应的action）
  // this.props.updateChartData(this.state.original_chart_data);
};

3. 替换过时的生命周期钩子 #

注意componentWillReceiveProps在React 16.3之后已经被标记为过时，推荐使用static getDerivedStateFromProps来处理props到state的映射，更符合React的新规范：

static getDerivedStateFromProps(nextProps, prevState) {
  // 第一次获取到API数据时保存原始副本
  if (!_.isEmpty(nextProps.diagnose.chart_data) && _.isEmpty(prevState.original_chart_data)) {
    return {
      original_chart_data: nextProps.diagnose.chart_data,
      filtered_chart_data: nextProps.diagnose.chart_data
    };
  }
  // 没有需要更新的状态时返回null
  return null;
}

核心思路就是：把不受外部控制的原始数据备份在组件自身的state中，这样无论外部props如何变化，你都能随时找回最初的API返回值。

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