Установка ответа от аксиоса к состоянию

Question

Когда я пытаюсь установить setState после запроса get axios, кажется, что у меня нет данных, готовых к визуализации. В консоли я получаю ответ, но не могу получить доступ к ответу в состоянии.

import React, { Component } from 'react';
import axios from 'axios';
import { Grid, Row, Col } from 'react-flexbox-grid';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import stylefile from './stylefile';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import { withStyles } from '@material-ui/core/styles';
import '../App.css';

class TitleBar extends Component {
    constructor() {
        super();
        this.state ={
            data:[],
        }
      }

    componentDidMount() {
        axios.get('http://api.abc',
            {
                headers: { "Postman-Token": "abc"}
            })
            .then((response) => {
                console.log(response.data);
                this.setState({
                    data: response.data,
                })
            })
            .catch((error) => {
                console.log(error)
            })
    }

  render() {
    const { classes } = this.props;
    console.log(this.state.data,"data response")
    return (
        <div>
            {
                this.state.data.map(((item,key) => (
                 <div>
                     //
                 </div>
             )))}
        </div>
    );
  }
}

export default withStyles(stylefile)(TitleBar);
          console.log(error);
        });
    }

// console.log (this.state.data) - не определено

Answer 1

Попробуйте исправить эти строки кода:

  constructor(props) { //fixed
    super(props); //fixed
    this.state ={
        data:[],
    }
  }

Именно так ReactJS настраивает метод constructor() для class component.Мы просто соблюдаем правила React при работе с ним.

Из Официального документа React они сказали:

Конструктор для компонента React вызывается раньшеэто установлено.При реализации конструктора для подкласса React.Component вы должны вызывать super (props) перед любым другим оператором.В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам.

Для получения дополнительной информации о методе contructor(): https://reactjs.org/docs/react-component.html#constructor

Это рабочийпример, который я уже сделал только для вас.

Демонстрация теперь доступна на CodeSandBox: https://codesandbox.io/s/8xvn8yl1l2

TitleBar.js

import React, { Component } from 'react';
import axios from 'axios';
export default class TitleBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        console.log(res.data);
        this.setState({ data: res.data });
      })
      .catch(err => console.log(err.message));
  }
  render() {
    return (
      <div>
        {this.state.data.map(i => (
          <div key={i.id}>
            <h2>{i.title}</h2>
          </div>
        ))}
      </div>
    );
  }
}

App.js

import React, { Component } from 'react';
import TitleBar from './components/TitleBar';

class App extends Component {
  render() {
    return (
      <div>
        <TitleBar></TitleBar>
      </div>
    );
  }
}

export default App;

Следуя этому примеру, если this.state.data по-прежнему undefine, то есть две вещи, на которых мы могли бы сосредоточиться для успешной отладки:

1. Структура объекта данных ответа.В вашем случае решение может быть

this.setState({
   data: response.data.DATA  
})

2. Работает ли API должным образом.

Надеюсь, это поможет.

Answer 2

Ваш объект ответа API включает в себя объект, подобный:

const response = {
  data: {
    MESSAGE: "List details Fetch successful",
    STATUS: "SUCCESS",
    DATA: [
      { id: 1, name: "foo" },
      { id: 2, name: "bar" },
      { id: 3, name: "baz" }
    ],
    HASH: "3--0"
  }
};

Итак, вам нужно response.data.DATA для вашего состояния здесь:

this.setState( { data: response.data.DATA } );

Вот рабочий пример имитации вашегоситуация.

const remoteData = {
  data: {
    MESSAGE: "List details Fetch successful",
    STATUS: "SUCCESS",
    DATA: [
      { id: 1, name: "foo" },
      { id: 2, name: "bar" },
      { id: 3, name: "baz" },
    ],
    HASH: "3--0",
  },
};

const fakeRequest = () =>
  new Promise( resolve => setTimeout( () => resolve( remoteData ), 1000 ) );

class App extends React.Component {
  state = {
    data: [],
  };

  componentDidMount() {
    fakeRequest().then( response => this.setState( { data: response.data.DATA } ) );
  }

  render() {
    return (
      <div>
        {this.state.data.map( el => (
          <div key={el.id}>
            <p>{el.id}</p>
            <p>{el.name}</p>
          </div>
        ) )}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById( "root" )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

С Реакция официальных документов ,

componentWillMount () вызывается непосредственно перед монтированием.Он вызывается перед render (), поэтому синхронный вызов setState () в этом методе не вызовет дополнительного рендеринга

Также следует использовать componentDidMount, так как componentWillMount устарел в новой версииреагировать.

componentDidMount() {
        axios.get('http://api./abc',
            {
                headers: { "Postman-Token": "abc" }
            })
            .then((response) => { //use arrow to get setState on this call without any extra binding or placeholder variable
                console.log(response.data);
                this.setState({
                    data: response.data,
                })
            })
            .catch((error) => {
                console.log(error)
            })
    }