React.js - 无法读取undefined的属性 [英] React.js - Can't read property of undefined

问题描述

我正在制作非常简单的反应应用程序。然而，当我尝试通过onChange事件调用父（实际上祖父母）组件的方法时，我一直得到未捕获的TypeError：无法读取未定义的属性'props'。

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.

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

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.).

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} />

最后传递给您首先看到的组件（MonthsTable）。无论是否相关，最终（大多数孩子）组件都会显示，这取决于if语句是否正常工作（可能某种程度上是相关的，我不知道）。

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).

问题是......为什么（setMonth）方法在（handleChangeOnMonth）方法中是'不可见的'。

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

感谢您的任何建议。

推荐答案

这里的实际问题是此上下文未定义在 handleChangeOnMonth 函数中。这是因为javascript处理函数上下文的方式，基本上是在调用函数时，如果你没有直接从对象调用它们，并且它们没有绑定它们将没有定义的上下文，并且因为你传递了函数作为输入组件的参数，它会丢失上下文。

The actual problem here is that the this context is not defined in your handleChangeOnMonth function. 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.

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

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

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

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

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

这篇关于React.js - 无法读取undefined的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！