React.js/Redux - 如果道具没有改变，如何更新状态？答案

【问题标题】：React.js/Redux - How to update state if props wasn't changed?React.js/Redux - 如果道具没有改变，如何更新状态？
【发布时间】：2018-12-17 12:06:06
【问题描述】：

如果道具发生了变化，我想更新我的本地状态。但我找不到适合这个问题的解决方案。 getDerivedStateFromProps 只给我 nextProps 和 prevState 但我需要 prevProps 和 nextProps。请写出任何可能解决此问题的解决方案）

情况： Cart 组件（有状态）从 props 获取获取的数据并将该数据放入 this.state.cart。 Cart 组件具有counterHandler 方法，该方法在计数器更改时触发（onIcrease、onDecrease、onChange）。此处理程序计算数据并根据事件生成新数据（计算 totalPrice 并更新项目数量）。然后将新数据放入setState 以更新 UI。状态不会因为我这样做而改变：

static getDerivedStateFromProps(nextProps, prevState) {
 if (!_.isEqual(nextProps.cart, prevState.cart)) {
   return { cart: nextProps.cart };

 } else return null;
}

我这样做是因为我想在真实数据发生变化时更新状态（来自道具的数据）。

目标：在不产生任何副作用的情况下更新计数器和总价的值（这些值可能在商店中更新或仅针对本地状态更新）。

这就是我的意思：

【问题讨论】：

你可以镜像状态对象中的道具，然后可以在 getDerivedStateFromProps 中比较新旧道具对象
是的，这是个好主意。我会用这个。谢谢好心人）
祝你好运。

标签： javascript reactjs redux

【解决方案1】：

您可能想使用componentDidUpdate，它会在组件上的道具更新时调用。它接收prevProps 和prevState 作为参数，并且您可以以this.props 的身份访问“nextProps”。

例如

componentDidUpdate(prevProps, prevState) {
  if (!_.isEqual(this.props.cart, prevState.cart)) {
   this.setState ({ cart: this.props.cart });
 }
}

【讨论】：

抱歉，我无法真正理解您，因为我想将prevProps 与nextProps 进行比较。但你写的是比较this.state.props和prevState
我只使用了您的示例，您将 prevProps 与 prevState 进行比较，但在我的示例中，“this.props”是您正在寻找的“下一个道具”

【解决方案2】：

你可以使用 react 类的componentWillReceiveProps 方法。该方法会在父组件渲染时执行，子组件会在子组件中执行componentWillReceiveProps 方法。在 child 的这个方法中，您可以根据新的 props 更新状态。

componentWillReceiveProps(nextProps){
   //You can access current props via this.props
   //You can access newProps from argument
   //Change component state after comparing both props
}

【讨论】：

此方法已弃用。