Реагировать рефакторинг componentDidMount () на вызов функции

Question

У меня есть работающий компонент componentDidMount, использующий axios, который начинает иметь избыточные вызовы.

Я пытался создать отдельную функцию для вызова, но теперь она ломает все.

Я попытался изменить порядок функций и указать, где они объявлены ... но при попытке визуализации я получаю нулевые ошибки.

TypeError: Cannot read property 'map' of undefined

Рабочий компонент

componentDidMount() {
    const url = `${API_URL}?$limit=${API_LIMIT}`;
    const record_count = `${API_URL}?$select=count(*)`;
    axios.get(url).then(response => response.data)
      .then((data) => {
        this.setState({ meteorite: data })
        console.log(this.state.meteorite)
      })
    axios.get(record_count).then(response => response.data)
      .then((data) => {
        this.setState({ total_count: data }) 
        console.log(this.state.total_count)
      })  


  }

Попытка ...

getData(url){  
    axios.get(url).then(response => response.data)
      .then((data) => {
        return data;
      })
  }

componentDidMount() {
    const init_url = `${API_URL}?$limit=${API_LIMIT}`;
    const record_count_url = `${API_URL}?$select=count(*)`;
    console.log("init_url: " + init_url)
    this.setState({ meteorite: this.getData(init_url) })
    this.setState({ total_count: this.getData(record_count_url) })

  }

Answer 1

Вот переработанная версия.

getData = (url, key) => {
  axios.get(url)
    .then(response => response.data)
    .then((data) => {
      this.setState({
        [key]: data
      })
    })
}

componentDidMount() {
  const url = `${API_URL}?$limit=${API_LIMIT}`;
  const record_count = `${API_URL}?$select=count(*)`;
  this.getData(url, 'meteorite');
  this.getData(record_count, 'total_count');
}

Answer 2

Вы действительно близки, вам просто нужно вернуть вызов axios и поместить setState внутрь a, чтобы захватить данные.

getData(url) {
  return axios.get(url).then(response => response.data)
    .then((data) => data)
}

componentDidMount() {
  const init_url = `${API_URL}?$limit=${API_LIMIT}`;
  const record_count_url = `${API_URL}?$select=count(*)`;
  console.log("init_url: " + init_url)
  this.getData(init_url).then(meteorite => this.setState({ meteorite }))
  this.getData(record_count_url).then(total_count => this.setState({ total_count }))
}

Я использовал некоторую деструктуризацию объектов в операторах then, чтобы сделать код более кратким.