React-Redux：ComponentDidMount（）中只有一个未定义的属性

Question

我的容器文件中包含以下代码：

const mapStateToProps = (state) => ({
   homes: Object.values(state.entities.homes),
   center: { lat: 37.7758, lng: -122.435 },
});

这在我的组件文件中：

 <div>
   <div className="left-half" >
     <Map
       homes={homes}
       center={center}
     />
   </div>
   <div className="right-half">
     <HomeIndex 
       homes={homes} 
     />
   </div>
</div>

我为Map和HomeIndex容器传递了相同的homes HomeIndex但是当我尝试通过Map容器中的this.props.homes访问它时，它显示为undefined。

奇怪的是this.props.center是在定义homes定义的。

请务必注意，在Map容器中，我正在ComponentDidMount（）方法中访问道具。

我已经四处搜索，并且了解到ComponentDidMount不会抓住更新的道具，但是由于我是从容器文件中的状态中获取道具的，所以道具不应该在到达我的Map组件时更新吗？

Answer 1

您正在传递home props作为自己的财产 。但是在容器中，您正在用state props 覆盖它。

const mapStateToProps = (state, ownProps) => ({
   homes: Object.values(state.entities.homes), //state props get passed and not actual own props.
   center: { lat: 37.7758, lng: -122.435 },
});

为了获得自己的道具，请使用ownProps 。

const mapStateToProps = (state, ownProps) => ({
   homes: Object.values(ownProps.homes),//access home via ownProps
   center: { lat: 37.7758, lng: -122.435 },
});

Answer 2

如果您希望该地图容器的componentDidMount具有props值，请像这样使用它。 这样，Map和HomeIndex仅在未定义home时才会呈现。

  <div>
     <div className="left-half" >
     {homes && 
       <Map
           homes={homes}
           center={center}
         />
     }
     </div>
     <div className="right-half">
      { homes && 
        <HomeIndex 
           homes={homes} 
        />
      }
     </div>
  </div>

要检查减速器返回的房屋价值，请更改mapStateToProps

const mapStateToProps = (state) =>{ 
   console.log(state.entities.homes);
   return { 
      homes: Object.values(state.entities.homes),
      center: { lat: 37.7758, lng: -122.435 },
   }
}; 

Answer 3

为什么有人来了为空的原因是因为ComponentDidMount()的子组件的前跑ComponentDidMount()在父容器。 因此，当我尝试将this.props.homes从父级传递给子级时，它是未定义的。

为了解决这个问题，我将if(!this.props.homes) return null在我的父容器的渲染函数的顶部if(!this.props.homes) return null ，以便可以在渲染子项之前等待父级中的ComponentDidMount（）运行。