reactjs - 无法获取未定义或空引用的属性 'setState'

Question

我正在尝试向应用程序添加一些过滤，但我的更改处理程序似乎没有对“this”的引用？知道我在这里做错了什么吗？

class ShipmentList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            shipments: [],
            searchString: '',
            loading: false
        }
    }

    handleChange(e){
    this.setState( {searchString:e.target.value} )   // <- This is where the error happens  
    }

    componentDidMount() {
        this.setState({loading: true})
        fetch('/shipments-server.json')
        .then(response => response.json())
        .then(shipments => this.setState({
            shipments,
            loading: false
        }))

    render() {
    const { shipments, loading, searchString } = this.state
    var shipmentData = shipments
    var filter = this.state.searchString

    if( filter.length > 0 ) {
        shipmentData = shipmentData.filter(s => {
            return s.carrierName.toLowerCase().match( filter.trim().toLowerCase() )
        });
    }


    return (
        <div className="shipment-list">
            <ul className="filters">
                <li><input value={this.state.searchString} onChange={this.handleChange} placeholder="Filter by Carrier" type="text" /></li>

我的数据从 JSON 文件加载得很好，但是当我在输入文本框中键入内容并调用 handleChange() 方法时，我看到错误“无法获取未定义或 null 引用的属性“setState””。当我在编译的代码中设置断点时，我可以看到“this”在handleChange()方法的范围内未定义，但我不知道为什么。任何帮助将不胜感激。

Answer 1

当使用较新的 ES6 类语法时，您将失去 createClass 的自动绑定(bind)功能。假如。这是一个有意的更改，因为 JavaScript 类也不执行自动绑定(bind)(因此行为是一致的)，您可以在此处阅读更多相关信息:https://facebook.github.io/react/docs/react-without-es6.html#autobinding

要解决此问题，您可以返回旧的 createClass语法，或通过多种方式手动将上下文绑定(bind)到您的方法:

1. 使用bind()关于方法:<input onChange={this.handleChange.bind(this)} />
2. 包含在箭头函数内:<input onChange={() => this.handleChange()} />
3. 使用 ES7 绑定(bind)运算符(需要正确的 Babel 配置):<input onChange={::this.handleChange} />

一个小问题是 bind()并且箭头函数声明(可能还有绑定(bind)运算符，但不是 100% 确定)基本上会创建一个新方法，每次你的 render()函数被调用。这会对性能产生一些影响(尽管您通常不必担心这一点)。但是，如果这是一个问题，您可以考虑在初始化时将有界方法分配给变量并引用该变量。像这样的事情:

constructor(props) {
  // ...
  this.handleChange = this.handleChange.bind(this);
}

或者，如果你的 Babel 配置允许类属性语法，你甚至可以跳过编写这样的赋值(并且必须弄清楚何时需要它们)，只需直接对所有内容使用箭头函数即可:

class ShipmentList extends Component {

    handleChange = () => {
        // your handleChange code
    }
}