Question

我一直在使用React Route遇到问题。我可以将pass2Parent = {this.pass2Parent}传递给搜索组件，但不能将data = {data}传递给Result组件。

我已经研究了好几个小时，并且探索了使用渲染而不是路径中的组件。不幸的是，它具有多次调用API并耗尽我的余地的副作用。

我只是不明白为什么它不能按原样工作。

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>
  );
};

这是console.log（data）返回的内容：

{
  images: {total: 8327, total_pages: 833, results: Array(10)},
  weather: {coord: {…}, weather: Array(1), base: "stations", main: {…}, visibility: 10000, …}
}

这是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,
  }
}

Answer 1

传递到您的data的参数component={(data)=>是一个SyntheticEvent，该事件在其范围内覆盖了状态中的data值。删除参数，然后将其删除...

<Route path='/result' exact component={() => <Result data={data}/>}/>

为什么我不能将此道具传递给子组件？

1 个答案: