- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对 React 还很陌生,我正在使用这个名为 axios 的库来进行 API 调用。
我成功获取了我的网络应用程序的登录数据。但是,我很难将其应用到数据表上。
这是代码:
ClientMaintancePage.js
import React, {useState, useCallback} from 'react';
import { MDBCard, MDBCardBody, MDBBreadcrumb, MDBBreadcrumbItem, MDBDataTable, MDBCol, MDBBtn } from 'mdbreact';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import ClientMaintenanceService from '../../services/ClientMaintenanceService';
import { ClientSaveSuccessModal } from '../modals/ClientSaveSuccessModal';
import { ClientSaveFailedModal } from '../modals/ClientSaveFailedModal';
const ClientMaintenancePage = () => {
const [clientName, setClientName] = useState('');
const [accountNumber, setAccountNumber] = useState('');
const [disabled, setDisabled] = useState(true);
const [showSuccessModal, setShowSuccessModal] = useState(false);
const [showFailedModal, setShowFailedModal] = useState(false);
const data = [
{
"id": 1,
"clientname": "Hermann MacConchie",
"accountnumber": "4905607119049823"
}, {
"id": 2,
"clientname": "Aleksandr Tavernor",
"accountnumber": "5641821398207954"
}, {
"id": 3,
"clientname": "Starlin Yarrell",
"accountnumber": "4175002190266301"
}, {
"id": 4,
"clientname": "Windy Skully",
"accountnumber": "30346494594931"
}, {
"id": 5,
"clientname": "Den Scanlon",
"accountnumber": "5100138355726726"
}, {
"id": 6,
"clientname": "Bob Goldring",
"accountnumber": "4844049813381927"
}, {
"id": 7,
"clientname": "Isabella Gayne",
"accountnumber": "6763633366420141"
}, {
"id": 8,
"clientname": "Kerrill Capron",
"accountnumber": "3564928342735986"
}, {
"id": 9,
"clientname": "Butch Wharf",
"accountnumber": "3565719211349309"
}, {
"id": 10,
"clientname": "Mar Rase",
"accountnumber": "3538926468850152"
}, {
"id": 11,
"clientname": "Joyce Souness",
"accountnumber": "201425016950947"
}, {
"id": 12,
"clientname": "Loutitia Kettow",
"accountnumber": "3541351118401527"
}, {
"id": 13,
"clientname": "Debera Harroway",
"accountnumber": "491154982724626720"
}, {
"id": 14,
"clientname": "Alika Kerslake",
"accountnumber": "30121249428796"
}, {
"id": 15,
"clientname": "Stephine Lelievre",
"accountnumber": "3568984382091125"
}, {
"id": 16,
"clientname": "Jarrod Keneleyside",
"accountnumber": "493673306153146174"
}, {
"id": 17,
"clientname": "Saidee Peerman",
"accountnumber": "372827642218552"
}, {
"id": 18,
"clientname": "Cece Dimblebee",
"accountnumber": "30444925316170"
}, {
"id": 19,
"clientname": "Kurtis Twinbrow",
"accountnumber": "06042486709242653"
}, {
"id": 20,
"clientname": "Quillan Croyser",
"accountnumber": "5602236291308592"
}
];
const columns = [
{
headerStyle: {
backgroundColor: '#a6a6a6'
},
dataField: 'clientname',
text: 'Client Name',
sort: true,
filter: textFilter()
},
{
headerStyle: {
backgroundColor: '#a6a6a6'
},
dataField: 'accountnumber',
text: 'Account Number',
sort: true,
filter: textFilter()
}
];
const selectRow = {
mode: 'radio',
clickToSelect: true,
hideSelectAll: true,
onSelect: (row, isSelect, rowIndex) => {
console.log(rowIndex);
console.log(row.clientname);
console.log(isSelect);
setClientName(row.clientname);
setAccountNumber(row.accountnumber);
}
};
const fetchRequest = useCallback(() => {
ClientMaintenanceService.saveClientDetails(clientName, accountNumber)
.then((response) => {
console.log("saveclientmaintenance response.data.result>>> " + response.data.result)
if(response.data.result === "SUCCESS"){
setShowSuccessModal(true);
setShowFailedModal(false);
}
}).catch(() => {
console.log("catch>>>")
setShowSuccessModal(false);
setShowFailedModal(true);
})
});
const handleSuccessModalClose = () => {
setShowSuccessModal(false)
setClientName('')
setAccountNumber('')
}
const handleFailedModalClose = () => {
setShowFailedModal(false)
setClientName('')
setAccountNumber('')
}
const customTotal = (from, to, size) => (
<span className="react-bootstrap-table-pagination-total">
Showing { from } to { to } of { size } Results
</span>
);
const options = {
paginationSize: 4,
pageStartIndex: 0,
alwaysShowAllBtns: true,
hideSizePerPage: true,
firstPageText: 'First',
prePageText: 'Back',
nextPageText: 'Next',
lastPageText: 'Last',
nextPageTitle: 'First page',
prePageTitle: 'Pre page',
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
paginationTotalRenderer: customTotal,
sizePerPageList: [{
text: '5', value: 5
}, {
text: '10', value: 10
}, {
text: 'All', value: data.length
}]
};
return (
<div>
<MDBCard className="mb-2">
<MDBCardBody id="breadcrumb" className="d-flex align-items-center justify-content-between">
<MDBBreadcrumb>
<MDBBreadcrumbItem>RPS</MDBBreadcrumbItem>
<MDBBreadcrumbItem active>Client Maintenance</MDBBreadcrumbItem>
</MDBBreadcrumb>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-2">
<MDBCardBody>
<MDBCard className="mb-2">
<MDBCardBody>
<BootstrapTable
keyField='id'
hover
data={ data }
columns={ columns }
filter={ filterFactory() }
selectRow={ selectRow }
noDataIndication="No record(s) found."
pagination={ paginationFactory(options) }
/>
</MDBCardBody>
</MDBCard>
</MDBCardBody>
<MDBCol md="6">
<form className="form-horizontal form-group">
<label htmlFor="clientname" className="dark-grey-text">
Client Name
</label>
<input type="text" id="clientname" className="form-control"
value={clientName} onChange={e => setClientName(e.target.value)} disabled={disabled} />
<br />
<label htmlFor="clientname" className="dark-grey-text">
Account Number
</label>
<input type="text" id="accountnumber" className="form-control" maxLength="13"
value={accountNumber} onChange={e => setAccountNumber(e.target.value)} disabled={disabled} />
<div className="text-right mt-2">
<MDBBtn color="indigo" type="button" onClick={() => {setDisabled(false); setClientName(''); setAccountNumber('');}}>Add</MDBBtn>
<MDBBtn color="indigo" type="button" onClick={() => {setDisabled(false);}}>Edit</MDBBtn>
<MDBBtn color="indigo" type="button" onClick={() => {}}>Delete</MDBBtn>
<MDBBtn color="indigo" type="button" onClick={() => {fetchRequest();}}>Save</MDBBtn>
</div>
</form>
</MDBCol>
</MDBCard>
<ClientSaveSuccessModal
showSuccessModal={showSuccessModal}
handleSuccessModalClose={handleSuccessModalClose}
/>
<ClientSaveFailedModal
showFailedModal={showFailedModal}
handleFailedModalClose={handleFailedModalClose}
/>
</div>
);
}
export default ClientMaintenancePage;
看到那些硬编码的数据了吗?我想通过使用 API 调用使其动态化。
如果我所做的事情是正确的,请指导我。
ClientMaintenanceService.js
import axios from 'axios'
const API_URL = 'http://localhost:8080'
const API_URL2 = "https://api.mockaroo.com/api/2883cf10?count=1000&key=262bee40"
class ClientMaintenanceService {
saveClientDetails(clientname, accountnumber) {
console.log("ClientMaintenanceService post request>>> " + clientname + " " + accountnumber)
return axios.post(`${API_URL}/saveclientmaintenance`, {
clientname,
accountnumber
})
}
retrieveClientDetails(){
return axios.get(`${API_URL2}`)
}
}
export default new ClientMaintenanceService()
然后我会在我的页面中调用retrieveClientDetails()。
const fetchRequest = useCallback(() => {
ClientMaintenanceService.retrieveClientDetails()
.then((response) => {
}).catch(() => {
})
});
但是,我应该抛出什么参数?假设我想获取所有数据。
TIA
--编辑--
ClientMaintenancePage.js
const [data, setData] = useState([]);
useEffect(() => {
retrieveAllClient();
}, []);
const retrieveAllClient = useCallback(() => {
ClientMaintenanceService.retrieveClientDetails()
.then((response) => {
console.log("retrieveAllClient response.data>>>" + response.data)
setData(response.data)
}).catch(() => {
console.log("retrieveAllClient catch>>>")
})
});
最佳答案
加载页面时,您需要useEffect
来setData
import { useEffect, useState, useCallback } from 'react';
const [data, setData] = useState([]);
const fetchRequest = useCallback(() => {
ClientMaintenanceService.retrieveClientDetails()
.then((response) => {
setData(response.data);
}).catch(() => {})
});
useEffect(() => {
fetchRequest();
}, []);
关于javascript - React.js + axios : How do I avoid hard coding data on my datatable?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60769774/
我有一个 axios 拦截器,我在其中捕获 401 错误并将用户重定向到登录页面。问题是在 window.location 运行之后和实际重定向之前 - axios 操作继续到原始调用者。我想停止进程
我正在调用一个返回至少 2 个成功状态代码的 Rest API。 正常的 200 OK 和 202 Accepted 状态代码。 两者都在正文中返回一个内容。 如果我在 postman 中执行我的电话
任何人都可以提出任何从 Axios 获得响应时间的方法吗?我找到了 axios-timing,但我真的不喜欢它(有争议,我知道)。我只是想知道是否有人找到了一些记录响应时间的好方法。 最佳答案 您可以
我正在尝试使用 axios.create() 创建一个 axios 实例但似乎无法弄清楚如何在实例上设置默认方法。 不工作 export default axios.create({ requ
我正在将 axios 用于 React 应用程序,并且我想记录我在应用程序中任何位置进行的所有 axios 调用。我已经通过 create 函数使用了 axios 的单个全局实例,并且我能够记录通用的
我有一个公开一些端点的 NestJS 应用程序,我已经编写了一个客户端应用程序,我计划将其作为 NPM 包发布以与 nest 服务器一起使用。我正在尝试编写启动 nest 服务器的端到端测试,将其连接
我一直在使用这个将图像文件上传到 API (Graphcool),并且一切正常: fileUpload(file) { let data = new FormData();
在我的代码库中有使用创建的各种 Axios 实例 axios.create() 因为我的应用程序中使用了多个基本 URL。所以每个 baseURL 我们都创建了一个对应的 Axios 实例。 现在在
我有一个 API 实用程序函数,它使用构造函数符号调用 axios: axios({ method, url: `${BASE_URL}/${url}`, data }); 我想用
我正在尝试使用 mockAxios 来测试 axios 拦截器。 export default { get: jest.fn(() => Promise.resolve({ data: {}
https://github.com/axios/axios#cancellation 我正在研究如何取消上传 PUT 请求并在文档中遇到了这一部分。为什么需要 token 才能取消?简单来说流程或过
axios.put('http://localhost:3000/api/userDatas/findUserAddProp',{ params: { userId: "5bb
我的 axios promise 没有按预期工作。我猜执行是在 forEach 循环内开始的。我希望 axios 执行仅在 batch.commit 之后开始 aMobileNumbers.forEa
有区别吗 useEffect(()=>{ async function fetchData(){ await axios .get(path, config) .t
我正在使用 axios 获取信息,并且我需要在不同 axios 响应的另一个处理程序中使用该信息。我似乎无法在第二个响应处理中使用第一个响应中加载的数据。 例如: const [firstData,
我在我的 React 应用程序中使用 axios,在我的许多脚本中使用 import axios from 'axios 。我想使用一种为所有 axios 调用/错误调用的中间件。我该如何处理这个问题
在我的应用程序中,为了对用户进行身份验证,我调用了 fetchData 函数。如果用户 token 无效,应用程序将运行 axios.all(),我的拦截器将返回大量错误。 如何防止 axios.al
我已经按照 npm 包文档中的建议编写了一个 Axios POST 请求,例如: var data = { 'key1': 'val1', 'key2': 'val2' } axios
谁能提供有关 axios 和 vue-axios 之间区别的详细信息?我们需要使用哪一个?两者都需要使用api吗? 谢谢 最佳答案 vue-axios 只是一个包装器,将 axios 暴露给组件作为
我在向 Loopback(v3) API 发出的 Axios 请求中使用变量时遇到了麻烦。 什么有效?如果我使用“REST 表示法”,它运行良好: getInfo() { axios.get(
我是一名优秀的程序员,十分优秀!