在ReactJs中传递道具面临的问题

Question

I'm having a hard time passing down props to a component. I want to be able to use that object in componentDidMount Method. My current setup is i have an App component that is passing down an object to a Main which passes down that object as props to a TicketTable Component.

This is my App component

 export default class App extends Component {


constructor(props) { 
super(props);
this.state= { 
  keycloak: null,
  authenticated: false,
  user : {}, role: ''
 }
}

componentDidMount() {
const keycloak = Keycloak('/keycloak.json');
    keycloak.init({onLoad: 'login-required'}).then(authenticated => {
        this.setState({ keycloak: keycloak, authenticated: authenticated});
        // this.state.keycloak.loadUserInfo().success(user => this.setState({user}));
    }).catch(err=>console.log("ERROR", err));
 }
   render() {
return (

  <div>
      <Main keycloak={this.state.keycloak}/>

This is my Main component

export default class Main extends Component {
constructor(props){
  super(props);
 this.state={keycloak:''}
}

componentDidMount(){
  console.log("MAIN PROPS",this.props);
}


}
 render() {
     return (
       <div>
        <Switch>
           <Route exact path="/" render={(props)=><TicketTable 
  {...props} keycloak={this.state.keycloak}/>}/>

I want to to able to use the Keycloak object in my TicketTable component.

Thank you. Ps: I want to able to do that without the need of using a state management framework like redux

Answer 1

The keycloak prop that you are passing to your TicketTable component is actually empty because you are passing the state of the Route component as the prop and not the one which you got from App component.

So make this change and I think it should work:

<Route exact path="/" render={(props)=><TicketTable 
{...props} keycloak={this.props.keycloak}/>}/>