Получил неопределенный, когда я пытаюсь получить данные из API узла

Question

Я пытался использовать метод fetch () в метод componentDidMount () в моем приложении App.

Он работает на Почтальоне, и я получил данные с URL.

Вот код в приложении «Реакция»:

class WorldMap extends Component {
  constructor(){
    super()

    this.state = {
      zoom: 1,
      color: "#39464E",
      test: ''
    }
  }

  componentDidMount() {
    setTimeout(() => {
      ReactTooltip.rebuild()
    }, 100)

    //get all countries in db
    fetch('http://localhost:3000/country/20', {
      method: 'GET',
      headers: {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json',
      },
    })
    .then(data => {
      this.setState({test: data.name_fr})
    })
  }

  countryClick(geography){ 
    console.log(test)
  }
}

Вот что я получил в Почтальоне, когда пытался получить данные:

Проблема в том, что я не определился в консоли, когда нажимаю на страну.

Answer 1

Из вашей json структуры в почтальоне, похоже, вам нужен доступ к data.name_fr ответа. Также fetch по умолчанию, чтобы получить, и вам не нужны эти дополнительные заголовки. Ваш код извлечения может быть упрощен до:

fetch('http://localhost:3000/country/20')
  .then(res => res.json())
  .then(body => console.log(body.data.name_fr))

Answer 2

Измените ваш выбор на это:

fetch('http://localhost:3000/country/20', {
  method: 'GET',
  headers: {
    'Accept' : 'application/json',
    'Content-Type' : 'application/json',
  },
})
.then(data => data.json())
.then(jsonData => 
this.setState({test:jsonData.name_fr})
)

Answer 3

У вас неправильный доступ к данным.В вашем then, data будет весь результирующий объект со свойствами data, error и message.Если вы зарегистрировали объект data полностью до того, как присвоили его своему состоянию, вы, вероятно, заметили, что ваши предположения были неверны в отношении того, что было передано вам.В следующий раз я предлагаю отладку с помощью devtools с точками останова и / или настройкой журналов, чтобы отслеживать, где проблема.

.then(data => {
  this.setState({test: data.name_fr})
})

должно быть

.then(results => {
  this.setState({test: results.data.name_fr})
})