如何将道具传递到 <Route> 通过connect（）传递的组件的数量？ （未捕获的TypeError：无法读取未定义的属性“子级”）

Question

操作系统：Windows 10 Pro
反应路由器：4.1.1
反应：15.5.4

如何将道具传递到组件的<Route>中，这些道具是通过connect（）传递给组件的？

app.js

 class MainApp extends React.Component { constructor(props) { super(props); } render () { const SOME_PATH = window.location.pathname; return ( <ApolloProvider store={store} client={client}> <Router history={history}> <App> <Route path={SOME_PATH} component={Main}/> </App> </Router> </ApolloProvider> ) } } 

App.js

 import Main from './Main'; import { All_Posts_Comments_Query, } from '../graphql/mutations-queries'; import { withRouter } from 'react-router-dom'; // Root Query const allPostsCommentsQuery = graphql(All_Posts_Comments_Query, { options: { cachePolicy: 'offline-critical', fetchPolicy: 'cache-first', }, }); function mapStateToProps(state) { return { auth: state.auth }; } export const mapDispatchToProps = (dispatch) => { return bindActionCreators(actionCreators, dispatch); } export default withRouter(compose( allPostsCommentsQuery, connect(mapStateToProps, mapDispatchToProps) )(Main)); 

Main.js-因此，当我尝试执行以下操作时：

  render () { const props2 = this.props; return ( <div> <h1> <Link to="/">Flamingo City</Link> </h1> <Switch> <Route path={`${this.props.match.url}`} exact render={() => ( <PhotoGrid {...this.props2.children} {...this.props2} /> )} /> </Switch> </div> ); } 

我收到了Uncaught TypeError: Cannot read property 'children' of undefined错误消息的Uncaught TypeError: Cannot read property 'children' of undefined 。 控制台在PhotoGrid.js中记录this.props时发现该props是一个空对象。 但是this.props是根据所附的图片：

完整的错误消息是：

 Uncaught TypeError: Cannot read property 'children' of undefined at render (http://localhost:7770/static/0.4bcdfe2e54a9396a2ff8.hot-update.js:135:99) at Route.render (http://localhost:7770/static/bundle.js:79207:13) at http://localhost:7770/static/bundle.js:127491:21 at measureLifeCyclePerf (http://localhost:7770/static/bundle.js:126770:12) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:7770/static/bundle.js:127490:25) at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:7770/static/bundle.js:127517:32) at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127441:36) at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10) at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12) at ReactCompositeComponentWrapper.receiveComponent (http://localhost:7770/static/bundle.js:127242:10) at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22) at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127449:23) at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10) at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12) at ReactCompositeComponentWrapper.receiveComponent (http://localhost:7770/static/bundle.js:127242:10) at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22) at Object.updateChildren (http://localhost:7770/static/bundle.js:126609:25) at ReactDOMComponent._reconcilerUpdateChildren (http://localhost:7770/static/bundle.js:131411:32) at ReactDOMComponent._updateChildren (http://localhost:7770/static/bundle.js:131515:31) at ReactDOMComponent.updateChildren (http://localhost:7770/static/bundle.js:131502:12) at ReactDOMComponent._updateDOMChildren (http://localhost:7770/static/bundle.js:128656:12) at ReactDOMComponent.updateComponent (http://localhost:7770/static/bundle.js:128474:10) at ReactDOMComponent.receiveComponent (http://localhost:7770/static/bundle.js:128436:10) at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22) at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127449:23) at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10) at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12) at ReactCompositeComponentWrapper.performUpdateIfNecessary (http://localhost:7770/static/bundle.js:127256:12) at Object.performUpdateIfNecessary (http://localhost:7770/static/bundle.js:16938:22) at runBatchedUpdates (http://localhost:7770/static/bundle.js:9264:21) at ReactReconcileTransaction.perform (http://localhost:7770/static/bundle.js:27133:20) at ReactUpdatesFlushTransaction.perform (http://localhost:7770/static/bundle.js:27133:20) at ReactUpdatesFlushTransaction.perform (http://localhost:7770/static/bundle.js:9203:32) at Object.flushBatchedUpdates (http://localhost:7770/static/bundle.js:9286:19) at ReactDefaultBatchingStrategyTransaction.closeAll (http://localhost:7770/static/bundle.js:27199:25) at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:7770/static/bundle.js:27146:16) at Object.batchedUpdates (http://localhost:7770/static/bundle.js:130702:26) at Object.enqueueUpdate (http://localhost:7770/static/bundle.js:9314:22) at enqueueUpdate (http://localhost:7770/static/bundle.js:54187:16) at Object.enqueueForceUpdate (http://localhost:7770/static/bundle.js:54320:5) at Main.ReactComponent.forceUpdate (http://localhost:7770/static/bundle.js:57479:16) at forceUpdateIfPending (http://localhost:7770/static/bundle.js:124887:43) at traverseRenderedChildren (http://localhost:7770/static/bundle.js:124865:3) at http://localhost:7770/static/bundle.js:124895:5 at Array.forEach (native) at http://localhost:7770/static/bundle.js:14321:28 at wrapped (http://localhost:7770/static/bundle.js:103419:29) 

Answer 1

尝试将<PhotoGrid {...this.props2.children} {...this.props2} />更改为<PhotoGrid {...props2.children} {...props2} />