Question

在 React 中无法读取未定义的属性“setState”

2017-12-23

102

javascript reactjs

我的问题是，当我尝试在输入框中写入某些内容时，会出现此错误。有人能帮助我吗？谢谢（顺便说一下，我是 React 新手）

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

Answer 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 在转译过程中转换这些新功能。除非您认为添加额外的 babel 配置值得，否则最好坚持在构造函数中进行绑定。

Answer 2

您应该使用 this.onChange.bind(this) ，否则 this 将不会引用 Searcher 类。

Bastien Robert

2017-12-23

Answer 3

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

import autobind from 'autobind-decorator';

class Searcher extends Component {

  state = { inputValue: '' }

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

  ...

}