Reactjs 如何在customBodyRender MUI数据表中执行XHR请求
基于传递到customBodyRender()的行数据,我需要能够从单元格中获取一个整数并执行XHR请求以返回一些数据并将其附加到我正在渲染的组件中 我尝试使用async/await,但似乎不起作用。 预期行为 我应该能够在customBodyRender中发出XHR请求,并使用返回的数据附加到对象。 当前行为 出现以下错误: 未捕获不变冲突:对象作为React子对象无效(找到:[对象承诺]) 我正在使用的代码 守则的运作如下:Reactjs 如何在customBodyRender MUI数据表中执行XHR请求,reactjs,material-ui,mui-datatable,Reactjs,Material Ui,Mui Datatable,基于传递到customBodyRender()的行数据,我需要能够从单元格中获取一个整数并执行XHR请求以返回一些数据并将其附加到我正在渲染的组件中 我尝试使用async/await,但似乎不起作用。 预期行为 我应该能够在customBodyRender中发出XHR请求,并使用返回的数据附加到对象。 当前行为 出现以下错误: 未捕获不变冲突:对象作为React子对象无效(找到:[对象承诺]) 我正在使用的代码 守则的运作如下: customBodyRender waits for data t
customBodyRender waits for data to return and checks to see if cell value === 'promoted'.
If it is, I check to see if another cell in the row is an integer.
If it is, I then call getPromotionInfo which returns me a value that I need to append to a window.open onclick event.
async getPromotionInfo(id) {
let json = axios.get('/some/enedpoint/${id}/event');
return json
}
customBodyRender: async (value, tableMeta, updateValue) => {
if (value === 'open') {
return (<p style={{ color: 'green' }}>{value}</p>)
}
if (value === 'closed') {
return (<p style={{ color: 'red' }}>{value}</p>)
}
if (value === 'promoted') {
if (Number.isInteger(tableMeta.rowData[0])) {
const result = await this.getPromotionInfo(tableMeta.rowData[0]);
if (result.data.records[0].id !== null) {
return (
<Button2 onClick={function () {
window.open(`#/event/${result.data.records[0].id}`)
}} variant="contained" size="small" color="primary" style={{ backgroundColor: 'orange' }}>Promoted</Button2>
)
}
} else {
return (<div>Couldnt return promotion data</div>)
}
}
}
customBodyRender等待数据返回并检查单元格值是否为“已升级”。
如果是,我检查行中的另一个单元格是否为整数。
如果是,则调用getPromotionInfo,它返回一个需要附加到window.open onclick事件的值。
异步getPromotionInfo(id){
让json=axios.get('/some/enedpoint/${id}/event');
返回json
}
customBodyRender:async(值、tableMeta、updateValue)=>{
如果(值=='打开'){
返回({value}
)
}
如果(值=='关闭'){
返回({value}
)
}
如果(值=='promoted'){
if(Number.isInteger(tableMeta.rowData[0])){
const result=wait this.getPromotionInfo(tableMeta.rowData[0]);
if(result.data.records[0].id!==null){
返回(
促进
)
}
}否则{
返回(无法返回促销数据)
}
}
}