Question

由于某种原因，我无法检测到ComponentDidUpdate（）中道具的变化。

父项：

class Parent extends Component{

  componentDidUpdate(prevProps,prevState){
    // here, prevProps is the same as this.props even though the 
    // consultations object is changed by the date component
  }

  render(){
    return(
      <p>{this.props.consultation.date}</p> /* Changes when date 
      component changes the date. This works! */
      <DateComponent />
    );
  }
}
function mapStateToProps({consultation}){
  return {consultation}
}

export default connect(mapStateToProps, null)(Parent)

日期组件用于更改咨询日期。我确保不改变化简器中的状态，并使用Object.assign（）返回一个新对象。

当DateComponent更改咨询日期时，“ p标记”中的日期会完全更改

在ComponentDidUpdate中，prevProps.consultation.date和this.props.consultation.date相等。

两者都有新的日期值！我以为prevProps.consultation.date会给我更早的日期！

我被困住了，因为我无法检测到日期的变化并无法在ComponentDidUpdate（）中执行必要的操作。

我将非常感谢任何能阐明我可能会出错的地方的人。

谢谢大家。

编辑： ****要求的减速器代码****

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

Answer 1

该问题与对象的深度复制有关。

我的咨询对象具有这种结构：

consultations = {
 3322345: {id:123,date:10/10/2018},
 1234567: {id:456,date:10/10/2018}
}

我的错误是在化简器中，我首先要像这样复制当前状态：

var consultations_copy = {...state.consultations}

这是一个大错误！因为这不会对对象进行深层复制，但仍引用原始对象。

因此，当我进行类似咨询的更改[1234567] .date =“ 12/12/2018”时，我实际上是在更改原始对象！

进行深度复制的最佳方法是：

var consultations_copy = JSON.parse(JSON.stringify(state.consultations));

Answer 2

现在，您正在将一些属性从状态复制到协商中，并最终得到如下状态：

{
  ...state,
  consultation : {
    ...state,
    date: action.data.date
  }
}

我怀疑那是你想要的。我猜你打算这样做：

选择（1）：

{
  ...state,
  date: action.data.date
}

也许您的意思是协商是国家的财产，像这样：

选择（2）：

{
  ...state,
  consultation : {
    date: action.data.date
  }
}

是否选择上面的选择（1）或选择（2）取决于您的数据模型。

要实现选择（1）：

return Object.assign({},state,consultation);

或实现选择（2）：

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

无法在ComponentDidUpdate中检测连接到Redux Store的道具的更改

2 个答案: