Question

我知道这是一个非常普遍的问题，在发布此问题之前，我调查了许多其他投诉。

我上了父母

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>
    );
  }
}

还有一个班级的孩子

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

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

export default Child;

但是，在Child班上，我遇到了错误

“未捕获的ReferenceError：道具未定义”

我明显缺少什么吗？谢谢！

Answer 1

这是因为this组件内的Child引用。您需要为Arrow function ()=>{}使用getUsers或为构造函数内部的this绑定getUsers。箭头函数没有它自己的函数。使用封闭词汇范围的this值。您可以阅读有关arrow functions here的更多信息。

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

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

export default Child;

Answer 2

之所以发生这种情况，是因为您的this没有上课。它指的是您的功能。您可以使用箭头函数，也可以将其绑定到构造函数中的函数。只需添加下面的行

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

反应，this.props未定义

2 个答案: