如何在 React 函数组件中调用 API？答案

【问题标题】：How to call API inside React function component?如何在 React 函数组件中调用 API？
【发布时间】：2019-11-14 01:53:37
【问题描述】：

我有一个场景，比如需要在 React 函数组件中调用 API。如果可能，如何返回结果。我可以调用 API，但响应在变量中可用。请指教

我的示例代码

import React from 'react';
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import axios from 'axios';

const Table = (props) => {
  const getData = [axios.get("https://lq-time- 
    tracking.firebaseio.com/user.json").then(function(response) {
        console.log(response);
      }).catch(function(error) {
        console.log(error);
      })]    

 const data = [{getData}];       
 const columns = [{
    id: 'Name',
    Header: 'Name',
    accessor: data.user
  }, {
    Header: 'Date',
    accessor: 'Date',
  }, {
    Header: 'Comment',
    accessor:'Comment' 
  }]

  return <ReactTable
    data={...data}
    columns={columns}
    pivotBy={ ['Date', 'Name']}
  />
}       
export default Table;

【问题讨论】：

标签： javascript reactjs api

【解决方案1】：

您可能需要使用几个钩子； useEffect 进行 API 查询，useState 存储数据。 useEffect 钩子中的空依赖数组将确保 API 调用仅在组件挂载时进行。然后，当调用解决时，数据被设置为一个名为data 的有状态变量。

import React, { useEffect, useState } from 'react';
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import axios from 'axios';

const Table = (props) => {
  const [data, setData] = useState({});

  useEffect(() => {
    axios.get("https://lq-time-tracking.firebaseio.com/user.json")
      .then(function(response) {
        setData(response.data);
      }).catch(function(error) {
        console.log(error);
      })
  }, []);

  const columns = [{
    id: 'Name',
    Header: 'Name',
    accessor: data.user
  }, {
    Header: 'Date',
    accessor: 'Date',
  }, {
    Header: 'Comment',
    accessor:'Comment' 
  }]

  return <ReactTable
    data={...data}
    columns={columns}
    pivotBy={ ['Date', 'Name']}
  />
}

export default Table;

【讨论】：

【解决方案2】：

componentDidMount() {
   fetch("https://api.example.com/items")
     .then(res => res.json())
     .then(
       (result) => {
         this.setState({
           isLoaded: true,
           items: result.items
         });
       },
       // Note: it's important to handle errors here
       // instead of a catch() block so that we don't swallow
       // exceptions from actual bugs in components.
       (error) => {
         this.setState({
           isLoaded: true,
           error
         });
       }
     )
 }

【讨论】：