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

【问题标题】：Why can't I pass this prop to the child component?为什么我不能将此道具传递给子组件？
【发布时间】：2020-08-07 08:16:45
【问题描述】：

我在使用 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,
  }
}

【问题讨论】：

通过为您的内联组件指定一个data 参数，您将隐藏本地data 变量。在您的内联组件中，props 对象称为“数据”。省略数据参数：component={() => <Result data={data} />
数据何时可用？它在渲染<Result /> 组件时是否立即可用？还是以后再取？
@rayhatfield 我刚改成}/>，同样的问题来了up，那个在子组件里。 console.log(this.props) --> {data: {…}} data: proto: Object proto: Object

标签： javascript reactjs react-router react-props

【解决方案1】：

传递给component={(data)=> 的参数data 是一个SyntheticEvent，它在它的作用域内覆盖状态中的data 值。删除参数并且它...

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

【讨论】：

我刚改成}/>，同样的问题出现了，在子组件中。 console.log(this.props) --> {data: {…}} data: proto: Object proto: Object
为什么是data={this.state} 而不是data={this.state.data}
因为 this.state 是一个有两个键的对象，天气和图像。该州不存在“数据”。查看 console.log(data) 以查看 this.state 的内容。
在data 之前，请参阅状态...如果您需要从对象一致键中提取某些内容，data[weather]