反应，this.props未定义

Question

I know this is a very common problem and I looked into many other complaints before posting this.

I have class Parent

class Parent extends React.Component {
  constructor() {
    super();
    this.state = { 
      ...
    };

  }
  ....

  render() {
    return (
      <MuiThemeProvider theme={materialTheme}>
        <Child 
          ref={...} 
          groupId={this.state.groupId}
          groupUniqueId={this.state.groupUniqueId} />
      </MuiThemeProvider>
    );
  }
}

And a class Child

class Child extends React.Component {
  constructor() {
    super(props);
    this.state = { 
      ...
    };
    ...
  }
  getUsers() { 
    const url = `/someurl/${this.props.groupId}`;
    ...
  }

  render() {
    return (...);
  }
}

export default Child;

However, in the class Child, I get an error

"Uncaught ReferenceError: props is not defined"

Is there something obvious that I am missing? Thanks!

Answer 1

This is happening because your this is not referencing a class. It is referring to your function. You can either use arrow functions or bind this to your function in constructor. Just add below line

constructor() {
super(props);
  this.state = { 
    ...
  }
   this.getUsers = this.getUsers.bind(this)
 }