Reactjs：setState总是失败，并在componentDidMount中返回undefined [英] Reactjs: setState always fails and returns undefined in componentDidMount

问题描述

出现错误代码：

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

  class HelloWorld extends React.Component {
 constructor（）{
 super（）; 
 this.state = {listings：[]}; 
}; 
 
 componentDidMount（）{
 fetch（'./ javascripts / data.json'）然后（function（response）{
 return response.json（）
 }}然后（function（json）{
 console.log（'parsed json'，json.listings）; 
 this.setState（{listing：'test string'}）; 
 }）catch（（error）=> {
 console.log（error）; 
}）
} 
 render（）{
 return $ b< ListingUser userData = {this.state.listings} /> 
）; 
} 
} 
 
 ReactDOM.render（
< HelloWorld /> 
 document.getElementById（'example'）
） ; 
  

解决方案

您收到此错误的原因是， code>这个不是在承诺中引用你的组件类。为了使用 this.setState（），您需要 bind 正确的上下文这个。

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

您还可以使用箭头函数，它将在词法上绑定正确的 。

  fetch（'./ javascripts / data.json'）
 。（）= $ {
 return response.json（）; 
}）
 .then（json => {
 console.log（'parsed json' json.listings）; 
 this.setState（{listing：'test string'}）; 
}）
 .catch（error => {
 console.log ）; 
}）; 
  

Having strange errors using setState(), I always get nothing set to state:

Error code:

TypeError: Cannot read property 'setState' of undefined(…)

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

解决方案

The reason you're getting this error is because this doesn't refer to your component class inside of a promise. In order to use this.setState(), you'll need to bind the correct context of 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);
    });

You can also use an arrow function, which will lexically bind the correct value of 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);
    });

这篇关于Reactjs：setState总是失败，并在componentDidMount中返回undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！