React组件接收未定义的道具

Question

I build a project for a school's records system, in which I build the front-end with React. On the main component of the admin page, I wanted to have a react-router which will navigate through the admin dialogs. As I tried to implement this, the following problem occurred: when trying to pass parameters to a class through the react route component, the child component receives no props.

I have the following react component hierarchy:

class Test extends React.Component {
   constructor() {
       super();

       console.log("in class: " + this.props)
   }

   render() { return <div>test</div>}
}

class AdminPage extends BasicPage {
    /* Other class functions here... */
    render() {
       let pageBody = "";
       if(!this.state.isLoading)
           pageBody = (
               <Router>
                   <Switch>
                       <Route path={"/:schoolName/admin"} component={AdminMenu} exact/>
                       <Route path={"/:schoolName/admin/view/:id"} exact
                          component={() => <Test par1="abc" />} />
                   </Switch>
               </Router>
           );
       return (
           <Layout title={ this.state.isLoading ?
               TITLE_UNTIL_LOADED :
               PAGE_TITLE + this.state.schoolPrefs.heb_name}
                   subtitle={ this.state.subtitle }
                   notification={ this.state.notification }
                   isLoading={ this.state.isLoading }
           >
               {pageBody}
           </Layout>
       );
    }
}

When I go to /Random Name/admin/view/someID , it prints to the console in class: undefined .

I then wanted to see if the problem is in the passing component or the receiving one. I defined the function otherTest(props) as follows:

function otherTest(props) {
   console.log("Function props: " + props);
   return (<Test {...props} />);
}

And then changed the route component like so:

<Route path={"/:schoolName/admin/view/:id"} exact
  component={otherTest} />

When then I went to /Random Name/admin/view/someID , I saw that the function received the props just fine, but the log within <Test … /> still printed undefined .

I also tried adding <Test param1=”123” /> after the {pageBody} variable in the main render function, but it printed in class: undefined as well.

Does someone know where the problem might be?

Thanks.

Answer 1

You must take props parameter from constructor and then pass it to super.

constructor(props){
super(props);
}

Answer 2

Do not use this.props in constructor beacuse constructor fire only at the creating class moment. Use this code:

constructor(props) {
 super(props);

 console.log(props);
}