Question

使用setState（）出现奇怪的错误，我总是没有设置为state：

错误代码：

TypeError：无法读取属性＆＃39; setState＆＃39;未定义的（...）

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

您还可以使用箭头函数，它将以词法方式绑定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);
    });

Answer 2

在您的 .then() 内部，您使用了 this 关键字，这基本上是指内部本身。为了克服这个问题，您必须使用箭头函数来全局引用 this 的值。

使用普通函数

.then(function(response) {
   return response
   this.setState({listings: 'test string'}); // which will refer inside of this function
})

使用箭头函数

.then((response) => {
   return response
   this.setState({listings: 'test string'}); // which will refer outside/global
})

Reactjs：setState总是失败并在componentDidMount中返回undefined

2 个答案: