Question

嘿，大家尝试反应并在使用setState时出现问题，我一直无法读取未定义错误的属性setState，而且我不确定如何修复它。我已尝试在构造函数中使用bind，但仍然无法解决问题。

感谢您的意见。

import React from 'react';

class Products extends React.Component {
 constructor(props) {
 super(props)
 this.state = {products:{}}
 this.getItems = this.getItems.bind(this)
}

componentDidMount() {
  this.getItems('http://lcboapi.com/products/300681').then(function(response){
  console.log(response);
  this.setState({products:response});
},function(error){
  console.log('failed',error);
});
}
componentWillMount() {

}

getItems(url){

return new Promise(function (resolve,reject) {
  var req = new XMLHttpRequest();
  req.open('GET',url);
  req.setRequestHeader('Authorization','Token Token');


  req.onload = function(){
    if(req.status == 200){
      resolve(req.response);
    }else{
      reject(Error(req.statusText));
    }
  };

  req.onerror = function(){
    reject(Error("Error"));
  };

  req.send();

});

}

render() {
return (
 <div>
  hi
 </div>
);
 }
}
export default Products;

Answer 1

为了使this引用您可以.bind(this)功能的组件

function(response) {
  console.log(response);
  this.setState({products:response});
}.bind(this)

如果您可以使用ES6，那么您也可以使用自动绑定this的箭头功能：

(response) => {
  console.log(response);
  this.setState({products:response});
}

使用setState时，这是未定义的

1 个答案: