反应重构componentDidMount（）以调用函数

Question

我有一个使用axios的工作正常的componentDidMount组件，开始有多余的调用。

我试图制作一个单独的函数来调用，但是现在它破坏了一切。

我尝试对函数及其声明的位置进行重新排序...但是在尝试渲染时，出现空错误。

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语句中使用了一些对象分解，以使代码更简洁。