我有一个场景需要在 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;
最佳答案
您可能需要使用几个钩子(Hook); useEffect
进行 API 查询,useState
存储数据。 useEffect
Hook 中的空依赖项数组将确保仅在组件安装时才进行 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;
关于javascript - 如何在 React 函数组件中调用 API?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58848247/