Проблема сопоставления производных от API значений в состояние React.js

Question

Я новичок в работе с React / Axios.

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

Затем я пытаюсь отобразить имя каждого определения в браузере с помощью функции рендеринга.

  constructor(props) {
    super(props);
    this.state = {
      definitions: [],
      errors: null
    };
  }

  componentDidMount() {
    this.getUrbDef();
  }

  getUrbDef() {
    axios({
      method: 'get',
      url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
      headers: {'host': 'mashape-community-urban-dictionary.p.rapidapi.com', 'X-RapidAPI-Key': 'keydata'},
      params: {'term': 'world'}
    })
    .then(function (response) {
      console.log(response);
    })
    .then(response =>
      response.data.list.map(definition => ({
        name: `${definition.definition}`,
        id: `${definition.defid}`,
      }))
    )
    .then(definitions => {
      console.log(definitions);
      this.setState({
        definitions,
        isLoading: false
      });
      })
    .catch(error => this.setState({ error, isLoading: false }));
  }

  // Renders to the browser
  render() {
    // Grabbing objects to use from state
    let definitions = this.state.definitions;

Как упоминалось ранее, я впервые использую React.js таким образом, поэтому я немного озадачен - любая помощь будет принята с благодарностью!

Демонстрация:https://codesandbox.io/s/stoic-neumann-28rhe

Answer 1

Проблема в том, что обработчик then ничего не возвращает:

.then(function (response) {
  console.log(response);
})

Объяснение :

Вызов then возвращает Обещание, которое будет решено/ отклоняется в зависимости от того, что происходит внутри функции обработчика.

В вашем случае обработчик ничего не возвращает (console.log(response)), поэтому обещание, возвращаемое then, разрешается с неопределенным значением, какрезультат:

.then(response =>
  response.data.list.map(definition => ({
    name: `${definition.definition}`,
    id: `${definition.defid}`,
  }))
)

получает неопределенное значение.

Чтобы исправить это, нужно либо:

1) вернуть response в обработчик then:

.then(function (response) {
  console.log(response);
  return response;
})

2) удалить из цепочки первый then:

axios({
  method: 'get',
  url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
  headers: {'host': 'mashape-community-urban-dictionary.p.rapidapi.com', 'X-RapidAPI-Key': 'keydata'},
  params: {'term': 'world'}
})
.then(response =>
  response.data.list.map(definition => ({
    name: `${definition.definition}`,
    id: `${definition.defid}`,
  }))
)

, затем

Answer 2

Эль Аутар Хамза прав. Но я бы хотел немного измениться.

axios({
  method: 'get',
  url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
  headers: {'host': 'mashape-community-urban-dictionary.p.rapidapi.com', 'X-RapidAPI-Key': 'keydata'},
  params: {'term': 'world'}
}).then(response => {
  console.log(response);
  return response.data;
}).then(data => data.list.map(definition => ({
  name: `${definition.definition}`,
  id: `${definition.defid}`,
}))).then(definitions => {
  console.log(definitions);
  this.setState({
    definitions,
    isLoading: false
  });
}).catch(error => this.setState({ error, isLoading: false }));