Javascript OwnProps匹配和参数未定义
试图从我的url中获取Javascript OwnProps匹配和参数未定义,javascript,reactjs,redux,react-router,Javascript,Reactjs,Redux,React Router,试图从我的url中获取id,以便使用它获取componentDidMount上的数据。我还使用它在组件中设置一些状态,以便在页面上显示信息。但是,ownProps.match和ownProps.params都是未定义的。我尝试了很多方法,我所能想到的就是我的/route在thing/:id之前是匹配的,它导致了一个问题 (我可以使用任何一个,但它们都会失败)。 TypeError:this.props.params未定义 TypeError:this.props.match未定义 以下是我的路线
id
,以便使用它获取componentDidMount
上的数据。我还使用它在组件中设置一些状态,以便在页面上显示信息。但是,ownProps.match
和ownProps.params
都是未定义的。我尝试了很多方法,我所能想到的就是我的/route在thing/:id之前是匹配的,它导致了一个问题
(我可以使用任何一个,但它们都会失败)。
TypeError:this.props.params未定义
TypeError:this.props.match未定义
以下是我的路线:
导出默认值(
);
mapstatetrops在这里(我通常会对东西进行注释,直到我能找出问题所在,所以可以忽略该问题)。我真正看到的问题是const{id}部分
函数mapStateToProps(状态,ownProps){
console.log(ownProps);
返回{
数据:state.data,
令牌:state.auth.token,
已加载:state.data.loaded,
isFetching:state.data.isFetching,
isAuthenticated:state.auth.isAuthenticated,
thing:state.things[ownProps.match.params.id],
};
}
这是我的一个部件让我头疼的地方
@connect(mapStateToProps、mapDispatchToProps)
导出类扩展组件{
建造师(道具){
超级(道具);
}
componentDidMount(){
const{id}=this.props.match.params;
这是fetchData();
this.props.fetchThing(id);
}
顺便说一句,当我console.log
上面的时候,ownProps就可以通过了。但是它缺少了任何参数/匹配,这让我觉得它是在预期匹配之前的路由匹配?这太荒谬了,因为我无法在不丢失react路由器参数的情况下进行嵌套路由
我现在已经开始这么长时间了,以至于我失去了注意力。向一些很棒的人寻求帮助
应用程序是react 15.3,react router v3,redux。我看到你正在渲染“ThingContainer”,但你的类是一个“东西”。你在哪里使用HOC?你记得把所有道具都传给孩子吗
例如:
const ThingContainer = (props) => <Thing ...props />
const ThingContainer=(道具)=>
从MapStateTrops()返回的props
对象
应该包含ownProps.match
,如果你想在组件中使用它。可以将它添加为另一个属性,或者将ownProps
合并到要返回的对象中。Ahhh!非常感谢!我知道我看代码太长了会发疯的,哈哈。果然,将props传递到了我的容器和this.props。params马上出现了。谢谢!我没有测试这个,但你可能是对的,它可以工作!我最终使用了上面的解决方案,因为它是预期的功能。我意识到我只是没有正确地通过道具=D。