我已经在react组件构造函数中定义了一个空数组,我希望将它与来自API调用的json响应数据一起赋值
class Grid extends Component {
constructor(props) {
super(props);
this.state = {
blogs : []
};
}我调用componentDidMount方法来加载这个组件上的数据,在这个组件中,我使用setState赋值
componentDidMount(){
Axios.get("/api/blogs").then(response => {
const blogData = response.data;
this.setState({blogs: blogData.data});
});
}JSON响应数据如下(具有元和链接的Laravel集合资源)
{
"data": [
{
"title": "Experiments in DataOps",
"status": true,
"publish_date": "2020-01-29",
"slug": "experiments-in-dataops"
},
{
"title": "What is it about certifications anyway?",
"status": true,
"publish_date": "2020-01-29",
"slug": "what-is-it-about-certifications-anyway"
}
],
"links": {
"self": "link-value",
"first": "http://adminpanel.test/api/blogs?page=1",
"last": "http://adminpanel.test/api/blogs?page=1",
"prev": null,
"next": null
},
"meta": {
"current_page": 1,
"from": 1,
"last_page": 1,
"path": "http://adminpanel.test/api/blogs",
"per_page": 15,
"to": 2,
"total": 2
}
}但是,当我稍后在填充网格数据时调用博客数组时,它仍然是未定义的
<BootstrapTable data={this.blogs} version="4" striped hover pagination search options={this.options}>
我得到一个空表,在blogs上调用console.log,this.blogs显示它是未定义的。
对于这个网格组件,我使用了reactstrap和react-bootstrap-table。
发布于 2020-01-30 21:04:04
您未正确访问state,无法使用this.state.blogs访问blogs
<BootstrapTable data={this.state.blogs} version="4" striped hover pagination search options={this.options}>https://stackoverflow.com/questions/59986665
复制相似问题