在react中无法读取未定义的属性'setState'

时间:2017-12-23 23:20:29

标签: javascript reactjs

我的问题是,当我尝试在输入中写一些内容时,它会给我这个错误。谁能帮我? thx(我是新的反应btw)

class Searcher extends Component {
      constructor(props) {
        super(props)

        this.state = {
          inputValue: ''
        }
      }

      onChange (e) {
        console.log(e)
        this.setState({
          inputValue: e.target.value
        })
      }
      render () {
        return (
          <SearchBar>
           <SearchInput placeholder="Nunca pares de buscar" value={this.state.inputValue} onChange={this.onChange}/>
            <SearchContainer>
              <Search>
                <i className="fa fa-search" aria-hidden="true">
                </i>
              </Search>
            </SearchContainer>
          </SearchBar>
        )
      }
    }

3 个答案:

答案 0 :(得分:1)

createClass不同,React不为组件(ES6类)自动查找this。因此,您必须自己绑定方法。到目前为止,最常见的方法是绑定构造函数中的方法:

constructor(props) {
  super(props);
  this.state = { inputValue: '' };
  this.onChange = this.onChange.bind(this);
}

<强> DEMO

最好在这里而不是在渲染中(如某些代码所示),因为这样绑定函数只创建一次。在渲染中,它将使用每个新渲染创建,这可能是性能问题

最近开发人员一直在使用JavaScript的实验性功能,称为类属性,这意味着您可以不使用构造函数并使用箭头函数来创建方法:

class Searcher extends Component {

  state = { inputValue: '' }

  onChange = (e) => {
    this.setState({
      inputValue: e.target.value
    });
  }

  ...

}

但是,这需要您使用babel to transform these new features during transpilation。除非你认为添加额外的babel配置是值得的,否则你最好在构造函数中坚持使用绑定。

答案 1 :(得分:0)

您应该使用mysql = MySQL() mysql.init_app(app.app) ,否则这不会引用Searcher类。

答案 2 :(得分:0)

您可以再添加一个依赖项来解决问题

import autobind from 'autobind-decorator';

class Searcher extends Component {

  state = { inputValue: '' }

  @autobind
  onChange(e){
    this.setState({
      inputValue: e.target.value
    });
  }

  ...

}