javascript - Reactjs:setState总是失败并在componentDidMount中返回undefined

Question

在使用 setState() 时出现奇怪的错误，我总是没有设置状态:

错误代码:

TypeError: 无法读取 undefined(...) 的属性“setState”

class HelloWorld extends React.Component {
constructor() {
    super();
    this.state = {listings:[]};
};

componentDidMount (){
    fetch('./javascripts/data.json').then(function(response) {
        return response.json()
    }).then(function(json) {
       console.log('parsed json ', json.listings);
        this.setState({listings: 'test string'});
    }).catch((error) => {
        console.log(error);
    })
}
render () {
    return (
        <ListingUser userData={this.state.listings} />
    );
}
}

    ReactDOM.render(
        <HelloWorld />,
        document.getElementById('example')
    );

Answer 1

您收到此错误的原因是 this 没有在 promise 中引用您的组件类。为了使用this.setState()，你需要bind this 的正确上下文。

fetch('./javascripts/data.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        console.log('parsed json ', json.listings);
        this.setState({listings: 'test string'});
    }.bind(this))
    .catch((error) => {
        console.log(error);
    });

您还可以使用箭头函数，它会在词法上绑定(bind) this 的正确值。

fetch('./javascripts/data.json')
    .then(response => {
        return response.json();
    })
    .then(json => {
        console.log('parsed json ', json.listings);
        this.setState({listings: 'test string'});
    })
    .catch(error => {
        console.log(error);
    });