為什么我不能將此道具傳遞給子組件？

Question

我一直遇到 React Route 的問題。 我可以將 pass2Parent={this.pass2Parent} 傳遞給 Search 組件，但我不能將 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，其中 scope 會覆蓋來自 state 的data值。 刪除論點，它...

---

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

---