英文:
React Material Table not reloading while the data is fetched
问题
I understand that you want a translation for the provided code and text. Here's the translated code and text without any additional content:
我理解您需要提供的代码和文本的翻译。以下是翻译后的代码和文本，没有附加内容：
我正在尝试学习JS / React，但在制作"simple-shop"项目时遇到了困难。
我尝试异步获取数据然后加载到Material表格中，但不知道哪里出了问题。
表格显示"无记录可显示"，但在控制台中我可以看到结果。
这是获取函数：
useEffect(() => {
axios
.get('api/OrderData/getAllOrders')
.then(res => {
res.data.map(async x => {
apiData.push({
orderId: x.orderId,
orderGUID: x.orderGUID,
orderName: x.orderName,
orderDate: dateFormat(x.orderDate, "ddd mmm dd yyyy HH:MM:ss"),
orderStatus: x.orderStatus,
contractorId: x.contractorId,
creatorUsername: x.creatorUsername,
orderVendor: x.orderVendor,
magazyn: x.magazyn,
productId: x.productId,
orderPayment: await axios
.get("/api/Payments/getPaymentByOrderGUID?OrderGuid=" + x.orderGUID)
.then(res => {
if (res.status === 200) {
return "Opłacone";
} else {
return "Nie opłacone";
}
})
.catch(err => {
console.log(err);
return "Nie opłacone";
})
});
});
//执行其他操作
console.log(apiData);
setTableData(apiData);
})
.catch(err => {
console.log(err);
});
axios
.get('api/Contractor/getAllContractors')
.then(res => {
res.data.map(x => {
contractorData.push({
contractorId: x.contractorId,
contractorName: x.contractorName,
contractorSurname: x.contractorSurname,
contractorIndividualDiscount: x.contractorIndividualDiscount
});
});
})
.catch(err => {
console.log(err);
});
}, []);
以及Material表格设置：
<MaterialReactTable
displayColumnDefOptions={{
'mrt-row-actions': {
muiTableHeadCellProps: {
align: 'center',
},
size: 120,
},
}}
columns={columns}
data={tableData}
editingMode="modal" //默认值
enableColumnOrdering
enableRowActions
onEditingRowSave={handleSaveRowEdits}
onEditingRowCancel={handleCancelRowEdits}
renderRowActionMenuItems={({ row, closeMenu, table }) => [
当我删除任何async / await子句时，控制台中的结果相同，但数据显示出来了，但问题是，数据显示出来时少了一个值，我的意思是没有orderPayment，因为它显示为Promise，为了解决这个问题，我使用了async/await，但目前无法将其加载到表格中...
英文:
im trying to learn the JS / React, ive stuck with making the simple-shop project.
Im trying to fetch the data async then load to the Material table, but idk what is wrong.
The table says "no record to display", but in the console i can see the result: 
This is the fetch function:
useEffect(() => {
axios
.get('api/OrderData/getAllOrders')
.then(res => {
res.data.map(async x => {
apiData.push({
orderId: x.orderId,
orderGUID: x.orderGUID,
orderName: x.orderName,
orderDate: dateFormat(x.orderDate, "ddd mmm dd yyyy HH:MM:ss"),
orderStatus: x.orderStatus,
contractorId: x.contractorId,
creatorUsername: x.creatorUsername,
orderVendor: x.orderVendor,
magazyn: x.magazyn,
productId: x.productId,
orderPayment:
await axios
.get("/api/Payments/getPaymentByOrderGUID?OrderGuid=" + x.orderGUID)
.then(res => {
if(res.status === 200)
{
return "Opłacone"
}else {
return "Nie opłacone"
}
})
.catch(err => {
console.log(err)
return "Nie opłacone"
})
})
})
//do anything
console.log(apiData)
setTableData(apiData)
})
.catch(err => {
console.log(err)
})
axios
.get('api/Contractor/getAllContractors')
.then(res => {
res.data.map(x => {
contractorData.push({
contractorId: x.contractorId,
contractorName: x.contractorName,
contractorSurname: x.contractorSurname,
contractorIndividualDiscount: x.contractorIndividualDiscount
})
})
})
.catch(err => {
console.log(err)
})
}, [])
And the material table settings:
<MaterialReactTable
displayColumnDefOptions={{
'mrt-row-actions': {
muiTableHeadCellProps: {
align: 'center',
},
size: 120,
},
}}
columns={columns}
data={tableData}
editingMode="modal" //default
enableColumnOrdering
enableRowActions
onEditingRowSave={handleSaveRowEdits}
onEditingRowCancel={handleCancelRowEdits}
renderRowActionMenuItems={({ row, closeMenu, table}) => [
When i delete any async / await clousules im getting same result in console but the data is showing, but the problem is that, the data is showing without one value, i mean without orderPayment, cuz it is showing as Promise, to resolve it i did the async/await but for now i cannot load it to the table...
答案1
得分: 0
I have seen your whole code but It looks like the issue might be related to the fact that setTableData(apiData) is being called outside of the async map function. Since apiData is being populated asynchronously, setTableData is likely being called before apiData has finished being populated, resulting in an empty table.
For fixing your bug, you can use Promise.all to wait for all the promises to resolve before setting the state. Change your code above last axios getAllContractors inside useEffect Please Modify your code by my provided code:
axios
.get('api/OrderData/getAllOrders')
.then(res => {
const promises = res.data.map(async x => {
const orderPayment = await axios
.get("/api/Payments/getPaymentByOrderGUID?OrderGuid=" + x.orderGUID)
.then(res => {
if (res.status === 200) {
return "Opłacone";
} else {
return "Nie opłacone";
}
})
.catch(err => {
console.log(err);
return "Nie opłacone";
});
return {
orderId: x.orderId,
orderGUID: x.orderGUID,
orderName: x.orderName,
orderDate: dateFormat(x.orderDate, "ddd mmm dd yyyy HH:MM:ss"),
orderStatus: x.orderStatus,
contractorId: x.contractorId,
creatorUsername: x.creatorUsername,
orderVendor: x.orderVendor,
magazyn: x.magazyn,
productId: x.productId,
orderPayment: orderPayment
};
});
Promise.all(promises).then(apiData => {
console.log(apiData);
setTableData(apiData);
});
})
.catch(err => {
console.log(err);
});
And you know in the updated code, Promise.all is used to wait for all the promises returned by map to resolve before calling setTableData. This ensures that apiData is fully populated before trying to set the state. If you still face the error then please let me know. I'll guide you more about it.
英文:
I have seen your whole code but It looks like the issue might be related to the fact that setTableData(apiData) is being called outside of the async map function. Since apiData is being populated asynchronously, setTableData is likely being called before apiData has finished being populated, resulting in an empty table.
For fixing your bug, you can use Promise.all to wait for all the promises to resolve before setting the state. Change your code above last axios getAllContractors inside useEffect Please Modify your code by my provided code:
axios
.get('api/OrderData/getAllOrders')
.then(res => {
const promises = res.data.map(async x => {
const orderPayment = await axios
.get("/api/Payments/getPaymentByOrderGUID?OrderGuid=" + x.orderGUID)
.then(res => {
if (res.status === 200) {
return "Opłacone";
} else {
return "Nie opłacone";
}
})
.catch(err => {
console.log(err);
return "Nie opłacone";
});
return {
orderId: x.orderId,
orderGUID: x.orderGUID,
orderName: x.orderName,
orderDate: dateFormat(x.orderDate, "ddd mmm dd yyyy HH:MM:ss"),
orderStatus: x.orderStatus,
contractorId: x.contractorId,
creatorUsername: x.creatorUsername,
orderVendor: x.orderVendor,
magazyn: x.magazyn,
productId: x.productId,
orderPayment: orderPayment
};
});
Promise.all(promises).then(apiData => {
console.log(apiData);
setTableData(apiData);
});
})
.catch(err => {
console.log(err);
});
> And you know in the updated code, Promise.all is used to wait for all the promises returned by map to resolve before calling setTableData. This ensures that apiData is fully populated before trying to set the state. If you still face the error then please let me know. I'll guide you more about it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论