ReactJS 设置状态不会从 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}>