修复 React Material-table 显示远程数据的问题
Fix Issue with React Material-table to Display Remote Data
我有一个作为数组对象发送的远程数据。我将其转换为 JSON 数组,以便在 Material 数据 table 中显示此数据。我可以调用 API,当我记录响应时,我可以看到转换后的 JSON 作为以下数据:
[{"xxxx":"xxxx","yyyy":5,"zzzz":3,"tttt":1,"qqqqq":"some-data"}]
不幸的是,我无法在 table 中显示此数据,同时也实现了分页。请在下面找到我的代码并帮助我解决此问题:
data={query =>
new Promise((resolve, reject) => {
let formData = new FormData();
const userid = 'someID'
formData.append('userid', userid);
const config = {
headers: { 'content-type': 'multipart/form-data' },
};
let url = 'http://urlendpoint?'
url += 'per_page=' + query.pageSize
url += '&page=' + (query.page + 1)
fetch(url, {
method: 'POST',
body: formData,
config
})
.then(response => response.json())
.catch((error) => {
console.log(error.response);
})
.then(result => {
let resultData = JSON.stringify(result);
console.log('result: ' + resultData);
resolve({
data: resultData,
page: resultData.page - 1,
totalCount: resultData.total,
})
})
})
}
此外,我正在按照此 link 实施 material table:https://material-table.com/#/docs/features/remote-data
我实际上删除了到 JSON 字符串的转换,一切正常。请参阅下面我更新的代码:
data={query =>
new Promise((resolve, reject) => {
let formData = new FormData();
const userid = 'someID'
formData.append('userid', userid);
const config = {
headers: { 'content-type': 'multipart/form-data' },
};
let url = 'http://urlendpoint?'
url += 'per_page=' + query.pageSize
url += '&page=' + (query.page + 1)
fetch(url, {
method: 'POST',
body: formData,
config
})
.then(response => response.json())
.catch((error) => {
console.log(error.response);
})
.then(result => {
resolve({
data: result,
page: result.page - 1,
totalCount: result.total,
})
})
})
}
我有一个作为数组对象发送的远程数据。我将其转换为 JSON 数组,以便在 Material 数据 table 中显示此数据。我可以调用 API,当我记录响应时,我可以看到转换后的 JSON 作为以下数据:
[{"xxxx":"xxxx","yyyy":5,"zzzz":3,"tttt":1,"qqqqq":"some-data"}]
不幸的是,我无法在 table 中显示此数据,同时也实现了分页。请在下面找到我的代码并帮助我解决此问题:
data={query =>
new Promise((resolve, reject) => {
let formData = new FormData();
const userid = 'someID'
formData.append('userid', userid);
const config = {
headers: { 'content-type': 'multipart/form-data' },
};
let url = 'http://urlendpoint?'
url += 'per_page=' + query.pageSize
url += '&page=' + (query.page + 1)
fetch(url, {
method: 'POST',
body: formData,
config
})
.then(response => response.json())
.catch((error) => {
console.log(error.response);
})
.then(result => {
let resultData = JSON.stringify(result);
console.log('result: ' + resultData);
resolve({
data: resultData,
page: resultData.page - 1,
totalCount: resultData.total,
})
})
})
}
此外,我正在按照此 link 实施 material table:https://material-table.com/#/docs/features/remote-data
我实际上删除了到 JSON 字符串的转换,一切正常。请参阅下面我更新的代码:
data={query =>
new Promise((resolve, reject) => {
let formData = new FormData();
const userid = 'someID'
formData.append('userid', userid);
const config = {
headers: { 'content-type': 'multipart/form-data' },
};
let url = 'http://urlendpoint?'
url += 'per_page=' + query.pageSize
url += '&page=' + (query.page + 1)
fetch(url, {
method: 'POST',
body: formData,
config
})
.then(response => response.json())
.catch((error) => {
console.log(error.response);
})
.then(result => {
resolve({
data: result,
page: result.page - 1,
totalCount: result.total,
})
})
})
}