[英]Why can't I pass this prop to the child component?
I've been having a problem with React Route.我一直遇到 React Route 的问题。 I can pass pass2Parent={this.pass2Parent} to the Search component, but I can't pass data={data} to the Result component.我可以将 pass2Parent={this.pass2Parent} 传递给 Search 组件,但我不能将 data={data} 传递给 Result 组件。
I've been researching the problem for hours and I've explored using render instead of component in the route.我已经研究了几个小时的问题,并且探索了在路由中使用渲染而不是组件。 Unfortunately, it had the side effect of calling an API multiple times and burning through my allowance.不幸的是,它的副作用是多次调用 API 并耗尽我的津贴。
I just don't get why it's not working as it is..我只是不明白为什么它不能按原样工作..
render() {
let data = this.state;
console.log(data);
return (
<div style={{height: "inherit"}}>
<BrowserRouter>
<Switch>
<Route path='/' exact component={() => <Search pass2Parent={this.pass2Parent}/>}/>
<Route path='/result' exact component={(data) => <Result data={data}/>}/>
</Switch>
</BrowserRouter>
</div>
);
};
This is what console.log(data) returns:这是 console.log(data) 返回的内容:
{
images: {total: 8327, total_pages: 833, results: Array(10)},
weather: {coord: {…}, weather: Array(1), base: "stations", main: {…}, visibility: 10000, …}
}
This is what console.log(this.props) looks like in the child component:这是 console.log(this.props) 在子组件中的样子:
{
data: {
history: {length: 2, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …},
location: { pathname: "/result", search: "", hash: "", state: undefined },
match: { path: "/result", url: "/result", isExact: true, params: {…} },
staticContext: undefined,
}
}
the argument data
passed into your component={(data)=>
is a SyntheticEvent, that inside it scope overwrite the data
value from state.传递给组件的参数data
component={(data)=>
是一个 SyntheticEvent,其中 scope 会覆盖来自 state 的data
值。 Delete the argument and that it...删除论点,它...
<Route path='/result' exact component={() => <Result data={data}/>}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.