Почему я не могу передать эту опору дочернему компоненту? - PullRequest
Новая
       58

Почему я не могу передать эту опору дочернему компоненту?

0 голосов
/ 23 апреля 2020

У меня проблема с 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,
  }
}

1 Ответ

1 голос
/ 24 апреля 2020

аргумент data, переданный в ваш component={(data)=>, является SyntheticEvent, который внутри его области перезаписывает значение data из состояния. Удалить аргумент и что это ... 

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