Question

我有一个带有一些局部变量和方法的React组件。方法的声明顺序无关紧要（？），因为它们可以在任何我想声明的组件中调用的地方使用。

但是当我尝试在局部变量中引用方法时，如果在局部变量下声明了该方法，则它会给出未定义的信息，为什么？示例：

//THIS WORKS

someFunction = () => {
  //some logic
}

localVariable = [
  {name: 'test', myFunction: this.someFunction},
  {name: 'test2', myFunction: this.someFunction}
}

//console.log(localVariable) gives 'function' at 'myFunction' key

//THIS DOES NOT WORK

localVariable = [
  {name: 'test', myFunction: this.someFunction},
  {name: 'test2', myFunction: this.someFunction}
}

someFunction = () => {
  //some logic
}

//console.log(localVariable) give 'undefined' at 'myFunction' key

//but also if I pass do not pass only the reference it works

localVariable = [
  {name: 'test', myFunction: () => this.someFunction()},
  {name: 'test2', myFunction: () => this.someFunction()}
}

someFunction = () => {
  //some logic
}

Answer 1

请参考以下链接，

http://javascript.info/function-expressions-arrows

使用箭头函数语法创建someFunction时，实际上是在制作一个变量，该变量等于分配给它的函数。

因此，当您定义本地变量时，它不会获得未定义的引用。

这是函数声明和函数作为表达式的问题。

函数表达式在执行执行时创建，并且从那时起就可用。

Answer 2

您可以尝试在组件的类构造函数中设置localVariable。

class YourClassName extends React.Component {
  constructor(props) {
    super(props);
    this.localVariable = [
      {name: 'test', myFunction: this.someFunction},
      {name: 'test2', myFunction: this.someFunction}
    ]
  }
  someFunction = () => {
    // logic...
  }
}

函数引用未定义的本地对象React

2 个答案: