Реакция JS не может интерпретировать правильные вызовы оси, данные не определены

Question

Когда я выполняю вызов REST (get) с помощью axios из моего приложения реагирования, оно говорит, что ответ не определен.Но когда я пытаюсь сделать тот же звонок в Почтальоне, он явно дает правильный ответ.Реакт не может получить правильный ответ.Как мне решить эту проблему?

В ответе указано «undefined», а в response.data также указано «undefined».

class Blogpost extends React. Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

componentDidMount() {
const response = axios.get({
      URL: 'http://178.62.198.162/api/posts',
      headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
    })
    const items = response.data;
    this.setState({
      isLoaded: false,
      items: items,
    });
    console.log(this.items);
  }

render() {
    const {error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {this.items.map(item => (
            <li key={item.name}>
            {item.name}
            </li>
          ))}
        </ul>
      );
    }
  }
}

Ожидаемым результатом будет массив коллекций.Но на самом деле он возвращается 'undefined'.

Как я могу заставить его работать так, чтобы ответ давал правильный массив?

EDIT Кажется, проблема сПОЛУЧИТЬ запрос.Обещание отклоняется с кодом ошибки 404.

componentDidMount() {
const response = axios.get({
  URL: 'http://178.62.198.162/api/posts',
  headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
})
response.catch((error) => {
  console.log(error)
});

}

Это проблема на стороне сервера или на стороне клиента и как мне ее решить?

Answer 1

Вы неправильно используете axios. Axios всегда возвращает объект Promise.

Измените свой код на следующий, и он будет работать.

componentDidMount() {
const response = axios.get({
      URL: 'http://178.62.198.162/api/posts',
      headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
    })
    response.then((res) => {
      const items = res.data;
      this.setState({
        isLoaded: false,
        items: items,
      });
      console.log(this.items);
    }
})

  }

Подробнее об обещаниях вы можете прочитать здесь https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise