我正在ES6中编写一个简单的组件(使用BabelJS),并函数此。setState不工作。

典型的错误包括

无法读取undefined的属性“setState”

or

这一点。setState不是一个函数

你知道为什么吗?代码如下:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

当前回答

Alexandre Kirszenberg是对的,但另一件需要注意的重要事情是你把你的装订在哪里。我已经被这种情况困了好几天了(可能是因为我是初学者),但不像其他人,我知道bind(我已经应用了),所以我只是不明白为什么我仍然有这些错误。原来我把绑定的顺序弄错了。

另一个原因可能是我在this中调用了函数。State”,它不知道绑定,因为它恰好在绑定线之上,

以下是我的想法(顺便说一下,这是我第一次发帖,但我认为这很重要,因为我在其他地方找不到解决方案):

constructor(props){
    super(props);

       productArray=//some array

    this.state={ 
        // Create an Array  which will hold components to be displayed
        proListing:productArray.map(product=>{return(<ProRow dele={this.this.popRow()} prodName={product.name} prodPrice={product.price}/>)})
    }

    this.popRow=this.popRow.bind(this);//This was the Issue, This line //should be kept above "this.state"

其他回答

您的函数需要绑定,以便使用事件处理程序中的状态或道具

在ES5中,只在构造函数中绑定事件处理函数,而不直接在呈现中绑定。如果你直接在渲染中绑定,那么每次你的组件渲染和重新渲染时,它都会创建一个新函数。所以你应该总是在构造函数中绑定它

this.sendContent = this.sendContent.bind(this)

在ES6中,使用箭头函数

当你使用箭头函数时,你不需要做绑定,你也可以远离范围相关的问题

sendContent = (event) => {

}

您使用的是ES6,因此函数不会自动绑定到“此”上下文。您必须手动将函数绑定到上下文。

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

Morhaus是正确的,但这个问题可以不受约束地解决。

你可以将箭头函数与类属性建议一起使用:

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return <input type="text" onChange={this.changeContent} />;
  }
}

因为箭头函数是在构造函数的作用域中声明的,而且因为箭头函数从它们的声明作用域中维护这一点,所以一切都可以正常工作。这里的缺点是这些不会是原型上的函数,它们都将与每个组件一起重新创建。然而,这并不是什么缺点,因为绑定也会产生同样的结果。

如果有人能找到这个答案, 下面是一种无需手动绑定所有函数的方法

在构造函数()中:

for (let member of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
    this[member] = this[member].bind(this)
}

或者在全局变量中创建这个函数。jsx文件

export function bindAllFunctions({ bindTo: dis }) {
for (let member of Object.getOwnPropertyNames(Object.getPrototypeOf(dis))) {
    dis[member] = dis[member].bind(dis)
    }
}

并在你的构造函数()调用它如下:

bindAllFunctions({ bindTo: this })

Bind (this)可以解决这个问题,现在如果你不喜欢使用Bind,我们可以使用另外两种方法来实现这个目标。

1)和传统的方法一样,我们可以在构造函数中使用bind(this),这样当我们使用函数作为JSX回调时,this的上下文就是类本身。

class App1 extends React.Component {
  constructor(props) {
    super(props);
    // If we comment out the following line,
    // we will get run time error said `this` is undefined.
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor(e) {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <button onClick={this.changeColor}> button</button>
      </div>
    );
  }
}

2)如果我们将函数定义为带有箭头函数的类的属性/字段,我们就不需要再使用bind(this)了。

class App2 extends React.Component {
  changeColor = e => {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  };
  render() {
    return (
      <div>
        <button onClick={this.changeColor}> button 1</button>
      </div>
    );
  }
}

3)如果我们使用箭头函数作为JSX回调,我们也不需要使用bind(this)。更进一步,我们可以传递参数。看起来不错,不是吗?但它的缺点是性能问题,详情请参阅ReactJS doco。

class App3 extends React.Component {
  changeColor(e, colorHex) {
    e.currentTarget.style.backgroundColor = colorHex;
    console.log(this.props);
  }
  render() {
    return (
      <div>
        <button onClick={e => this.changeColor(e, "#ff0000")}> button 1</button>
      </div>
    );
  }
}

我已经创建了一个代码依赖来演示这些代码片段,希望它能有所帮助。