ReactJS установленное состояние не присваивает массив из Ax ios данных ответа - PullRequest
Новая
       3

ReactJS установленное состояние не присваивает массив из Ax ios данных ответа

0 голосов
/ 30 января 2020

Я определил пустой массив в конструкторе реагирующих компонентов, который я sh назначу с помощью json данных ответа от вызова API 

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

Я получаю пустую таблицу, вызывающую console.log on blogs и this.blogs показывает, что он не определен.

Я использую reactstrap и react-bootstrap-table для этого компонента сетки.

1 Ответ

3 голосов
/ 30 января 2020

У вас неправильный доступ к state для доступа к blogs использованию this.state.blogs: 

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