道具更改时反应组件不会重新渲染

Question

这是我的 2 个 React 组件 - Parent 和 Child

 class ParentComponent extends Component{

 render(){
    /* consultations comes from redux store
    and looks like { consultation_id:123, date:10/12/2013 } */
   return(
    _.map(this.props.consultations,(consultation)=>{

      return{
        <ChildComponent consultation={consultation} />
      }
    })
   );
  }
}

class ChildComponent extends Component{

  render(){
  return(
    <div>this.props.consultation.date</div>
  );
  }
}

我的问题是我有一些修改协商对象的操作。例如：父组件中的 props.consultation.date 发生变化，但子组件不会重新渲染以显示最新的咨询日期。

但是，我注意到如果我将咨询对象中的每个项目发送到子组件，如 <ChildComponent date={this.props.consultation.date} /> 它会在日期更改时重新呈现！

知道为什么当作为对象发送的道具发生变化时 React 不重新渲染组件吗？

我总是可以解决这个问题，但想知道这是一个错误还是我遗漏了什么？

原文由 Jogi Nayak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案是将 consultation={consultation} 更改为 consultation={...consultation}. 我仍然不确定为什么，但它有效！

原文由 Jogi Nayak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当您映射一组项目时，您需要将唯一的 key 道具传递给每个项目。这表明反应哪个元素是哪个。

 ...

_.map(this.props.consultations, consultation => {
  return (
    <ChildComponent
      key={consultation.id}
      consultation={consultation}
    />
  )
})

原文由 Fernando Rojo 发布，翻译遵循 CC BY-SA 4.0 许可协议