ComponentDidUpdate无法检测Redux关联Props变更问题求助

你的核心问题是：尽管页面上的日期能正常更新，但componentDidUpdate里prevProps.consultation和this.props.consultation指向了同一个对象，导致你无法获取旧的日期值。这是因为你的reducer没有正确创建新的consultation对象，而是不小心生成了错误的状态结构。

问题出在你的Reducer代码里 #

先看你当前的reducer逻辑：

case DATE_CHANGE_SUCCESS:
  var consultation = {...state}
  consultation.date = action.data.date;
  return Object.assign({},state,{consultation});

这里有两个关键错误：

1. var consultation = {...state} 是对整个state对象做浅拷贝，而不是对state.consultation这个子对象做拷贝。这个变量现在包含了state的所有属性，根本不是你要修改的那个日期所属的consultation对象。
2. 你修改的是consultation.date（这个拷贝出来的state对象的date属性），然后把这个奇怪的对象赋值回state的consultation属性。这导致你的store里的consultation结构完全不符合预期，但因为你返回了新的state对象，Redux还是触发了组件重渲染，所以页面显示更新了——这只是一个巧合。

正确的Reducer写法 #

你需要针对state.consultation这个子对象创建新的拷贝，修改它的date属性，再把这个新对象放回state里。有两种常用写法：

写法1：使用ES6扩展运算符（推荐） #

case DATE_CHANGE_SUCCESS:
  // 复制原consultation对象，同时覆盖date属性
  const updatedConsultation = {
    ...state.consultation,
    date: action.data.date
  };
  // 返回新的state，替换掉旧的consultation
  return {
    ...state,
    consultation: updatedConsultation
  };

写法2：使用Object.assign #

如果你更习惯ES5的写法：

case DATE_CHANGE_SUCCESS:
  // 创建原consultation的拷贝，并修改date
  const updatedConsultation = Object.assign({}, state.consultation, {
    date: action.data.date
  });
  // 创建新的state对象，替换consultation属性
  return Object.assign({}, state, { consultation: updatedConsultation });

这样修改后，每次日期变更时，你都会生成一个全新的consultation对象，Redux能正确检测到state的变化，connect会给Parent组件传递新的props。此时在componentDidUpdate里，prevProps.consultation是旧对象，this.props.consultation是新对象，它们的date属性就能正确区分新旧值了。

为什么页面之前能正常显示？ #

虽然你的reducer逻辑错误，但你最终用Object.assign({}, state, {consultation})返回了一个全新的state对象，Redux检测到state引用变化后触发了组件重渲染。而你的render方法直接读取this.props.consultation.date，刚好这个错误的consultation对象上有你刚设置的date值，所以页面显示正常——但这只是错误状态结构带来的巧合，长期来看会导致更多难以排查的问题。

额外验证点 #

• 确保DateComponent触发DATE_CHANGE_SUCCESS action时，action.data.date确实是正确的新日期值。
• 你的mapStateToProps写法是正确的，能正确从store中获取consultation对象。

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