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>

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

奇怪的是，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值，请像这样使用它。这样，只有在未定义home时，Map和HomeIndex才会呈现。

  <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放在父容器的渲染函数的顶部，以便可以等待父级中的ComponentDidMount（）运行之后再渲染子代。

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

3 个答案: