React.js -不能读取未定义的属性

React.js - Can't read property of undefined

本文关键字：未定义 属性 读取 不能读 js 不能 React      更新时间：2023-09-26

我正在制作非常简单的react应用程序。然而，当我试图通过onChange事件调用父(实际上是祖父母)组件的方法时，我一直得到Uncaught TypeError: Cannot read property 'props' of undefined。

这是触发事件的组件/表单(因此调用绑定父组件上的方法…是的，当我通过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>)
  }
}

下面是我如何将方法作为props从大多数父(祖父母)组件传递。

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

下面是我如何在父类(方法所有者和方法调用者之间的组件)中作为props传递方法

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

最后传递给您首先看到的组件(MonthsTable)。无论是否相关，最终(大多数子)组件的显示取决于if语句是否正常工作(可能是相关的，我不知道)。

问题是……为什么(setMonth)方法在(handleChangeOnMonth)方法中是"不可见的"

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

解决这个问题最简单的方法是绑定函数，我建议你在构造函数中绑定函数，如下所示: 
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包以更优雅的方式完成此操作:

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

您必须将提供给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>)
  }
}

如果您不想绑定您编写的每个函数。您可以使用ES6的箭头函数。这是因为箭头函数没有自己的this，所以它们继承了类的this。您可以在这里阅读更多关于Lexical作用域的内容，以及幕后的机制。这个解决方案实际上出现在文档中。

handleChangeOnMonth = (e) => { 
  this.props.setMonth(e.target.id, e.target.value);
}
相关文章：