ReactJS set 状态不会从 Axios 响应数据中分配数组

Question

我在 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
}
}

但是，当我稍后在填充网格数据时调用它时，blogs 数组仍然未定义

<BootstrapTable data={this.blogs} version="4" striped hover pagination search options={this.options}>

我得到一个空表，在blogs上调用console.log，this.blogs显示它是未定义的。

我正在为这个网格组件使用reactstrap和react-bootstrap-table。

Answer 1

您没有正确访问state以访问blogs使用this.state.blogs：

<BootstrapTable data={this.state.blogs} version="4" striped hover pagination search options={this.options}>