首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >ReactJS设置状态未从Axios响应数据分配数组

ReactJS设置状态未从Axios响应数据分配数组
EN

Stack Overflow用户
提问于 2020-01-30 21:02:22
回答 1查看 200关注 0票数 0

我已经在react组件构造函数中定义了一个空数组,我希望将它与来自API调用的json响应数据一起赋值

代码语言:javascript
复制
class Grid extends Component {
  constructor(props) {
    super(props);

    this.state = {
      blogs : []
    };
  }

我调用componentDidMount方法来加载这个组件上的数据,在这个组件中,我使用setState赋值

代码语言:javascript
复制
componentDidMount(){
  Axios.get("/api/blogs").then(response => {
    const blogData = response.data;
    this.setState({blogs: blogData.data});
  });
}

JSON响应数据如下(具有元和链接的Laravel集合资源)

代码语言:javascript
复制
{
  "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.logthis.blogs显示它是未定义的。

对于这个网格组件,我使用了reactstrapreact-bootstrap-table

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-30 21:04:04

您未正确访问state,无法使用this.state.blogs访问blogs

代码语言:javascript
复制
<BootstrapTable data={this.state.blogs} version="4" striped hover pagination search options={this.options}>
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59986665

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档