Javascript React.js - 无法读取未定义的属性

React.js - Can't read property of undefined

提问by Albert Nemec

I'm making very simple react app. Yet as I try to invoke method of parent (actually grandparent) component via onChange event, I keep getting Uncaught TypeError: Cannot read property 'props' of undefined.

我正在制作非常简单的反应应用程序。然而，当我尝试通过 onChange 事件调用父（实际上是祖父）组件的方法时，我不断收到Uncaught TypeError: Cannot read property 'props' of undefined.

Here is the component/form that is triggering the event (thus invoking method on binded parent component... Yes I used .bound(this) on the method as I passed it down from parent component via props.).

这是触发事件的组件/表单（因此在绑定的父组件上调用方法......是的，当我通过道具从父组件传递它时，我在方法上使用了 .bound(this) 。）。

class MonthsTable extends Component {
  handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value); // here the method is not found, causing error.
  }
  render(){
    console.log(this.props.setMonth) // here the method is present alright
    return (<form>
      {this.props.months.map((e, i) =>
         <input
          type='number'
          id={i} 
          key={i} // yes I know, bad habit, but in this case it doesn't matter
          value={this.props.months[i]}
          onChange={this.handleChangeOnMonth} />)}
    </form>)
  }
}

Here is how I pass the method as props from most parent (grandparent) component.

这是我如何将方法作为来自大多数父（祖父）组件的道具传递。

<Months setMonth={this.setMonth.bind(this)} />

Here is how I pass the method as props in the parent (the component that is between method owner and method invoker)

这是我如何将方法作为道具传递给父级（方法所有者和方法调用者之间的组件）

<MonthsTable setMonth={this.props.setMonth} />

And finally passed to component (MonthsTable) that you saw first. Wheter it is relevant or not, final (most child) components is displayed depending of if statement which works just fine (Might somehow be relevant, I don't know).

最后传递给你首先看到的组件（MonthsTable）。无论是否相关，最终（大多数子）组件都会根据 if 语句显示，该语句工作正常（可能以某种方式相关，我不知道）。

Question is... Why is the (setMonth) method 'invisible' inside of (handleChangeOnMonth) method.

问题是... 为什么 (setMonth) 方法在 (handleChangeOnMonth) 方法中“不可见”。

Thanks for any advice.

感谢您的任何建议。

采纳答案by vankov.ilija

The actual problem here is that the thiscontext is not defined in your handleChangeOnMonthfunction. This is caused because of the way that javascript handles the contexts of functions, basically when calling functions if you are not calling them directly from the object, and they are not bound they will not have a defined context, and since you are passing the function as a parameter to the input component, it loses the context.

这里的实际问题是this您的handleChangeOnMonth函数中没有定义上下文。这是由于 javascript 处理函数上下文的方式引起的，基本上在调用函数时，如果您不是直接从对象调用它们，并且它们没有被绑定，它们将没有定义的上下文，并且由于您正在传递函数作为输入组件的参数，它失去了上下文。

The simplest way to fix this is to bind the function, I suggest that you bind the function in the constructor, like so:

解决这个问题最简单的方法是绑定函数，我建议你在构造函数中绑定函数，像这样：

class MonthsTable extends Component {
  constructor(props, context){
    super(props, context);
    this.handleChangeOnMonth = this.handleChangeOnMonth.bind(this);
  }
  handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value);
  }
  render(){
    return (<form>
      {this.props.months.map((e, i) =>
         <input
          type='number'
          id={i} 
          key={i} 
          value={this.props.months[i]}
          onChange={this.handleChangeOnMonth} />)}
    </form>)
  }
}

alternatively if you are using decorators you could use the core-decoratorspackage to do this in a more elegant way:

或者，如果您使用装饰器，您可以使用该core-decorators包以更优雅的方式执行此操作：

import {autobind} from "core-decorators"

@autobind
class MonthsTable extends Component {     
  handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value);
  }
  render(){
    return (<form>
      {this.props.months.map((e, i) =>
         <input
          type='number'
          id={i} 
          key={i} 
          value={this.props.months[i]}
          onChange={this.handleChangeOnMonth} />)}
    </form>)
  }
}

回答by Rafi Ud Daula Refat

You have to bind your function that is supplied to onChange to the current context. You can bind it at the constructor of the class or you can bind it directly to the onChange() which is not good practice, though.

您必须将提供给 onChange 的函数绑定到当前上下文。您可以在类的构造函数中绑定它，也可以将它直接绑定到 onChange()，但这不是一个好习惯。

class MonthsTable extends Component {
  constructor(props){
    super(props);
    this.handleChangeOnMonth = this.handleChangeOnMonth.bind(this);
  }
  handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value); // here the method is not found, causing error.
  }
  render(){
    console.log(this.props.setMonth) // here the method is present alright
    return (<form>
      {this.props.months.map((e, i) =>
         <input
          type='number'
          id={i} 
          key={i} // yes I know, bad habit, but in this case it doesn't matter
          value={this.props.months[i]}
          onChange={this.handleChangeOnMonth.bind(this)} />)}
    </form>)
  }
}