javascript - 即使更新了材料表的数据，反应材料表的行数据值也不会更新
问题描述
材料表代码
{console.log('message data', messageData)}
<MaterialTable
columns={columnsData}
data={
messageData
}
icons={tableIcons}
actions={[
{
icon: () => <VisibilityIcon style={{ color: Constants.APP_PRIMARY_COLOR }} />,
tooltip: 'View',
onClick: (event, rowData) => {
this.props.HandleAdminFormDataClear();
this.props.history.push(`${this.props.location.pathname}/${rowData.id}`)
// this.props.HandleAdminFieldDataChange(Constants.ADMIN_FIELD_TYPE, messageType)
this.props.HandleAdminFieldDataChange(Constants.ADMIN_FIELD_MODE, Constants.MODE_VIEW)
// alert("You want to view " + rowData.id)
},
},
{
icon: () => <EditIcon style={{ color: Constants.APP_PRIMARY_COLOR }} />,
tooltip: 'Edit',
onClick: (event, rowData) => {
this.props.HandleAdminFormDataClear();
this.props.history.push(`${this.props.location.pathname}/${rowData.id}`)
// this.props.HandleAdminFieldDataChange(Constants.ADMIN_FIELD_TYPE, messageType)
this.props.HandleAdminFieldDataChange(Constants.ADMIN_FIELD_MODE, Constants.MODE_EDIT)
}
},
{
icon: () => <DeleteIcon style={{ color: '#EF4538' }} />,
tooltip: 'Delete',
onClick: (event, rowData) => {
this.setState({
dialogOpen: true,
deleteId: rowData.id
})
},
}
]}
options={{
actionsColumnIndex: -1,
sorting: true,
search: true,
showTitle: false,
thirdSortClick: false,
searchFieldStyle: customStyle,
searchText: "",
headerStyle: {
backgroundColor: 'rgb(191, 203, 215)',
opacity: 1
},
cellStyle: {
padding: '5px 16px 5px 16px'
},
paging: true
}}
components={{
Pagination: props => (
<TablePagination
{...props}
rowsPerPageOptions={[5, 10]}
rowsPerPage={this.state.rowsPerPage}
// count={messageData.length}
// page={
// this.state.page
// }
onChangeRowsPerPage={event => {
props.onChangeRowsPerPage(event);
this.handleChangeRowPerPage(event.target.value);
setTimeout(() => {
window.scrollTo({ behavior: 'smooth', top: '0px' });
}, 500)
}}
// onChangePage={this.handleChangePage}
//onChangeRowsPerPage={this.handleChangeRowsPerPage}
//ActionsComponent={this.TablePaginationActions}
/>
),
}}
/>
使用行数据的函数 getTitleColumn 包含调用获取图像视频或徽标的渲染
getImageorVideoLogo = (rowData) => {
console.log('row data', JSON.parse(JSON.stringify(rowData)));
if (this.props.type == Constants.ADMIN_TYPE_ALERT) {
return (<div>{rowData[this.props.type].title}</div>);
}
else if (this.props.type == Constants.ADMIN_TYPE_NOTIFFICATION) {
if (rowData.attachments && rowData.attachments[0].contentType.includes("image")) {
return (
<div style={{ display: 'flex', width: '200px' }}>
<div style={{ display: 'contents' }}><PanoramaOutlinedIcon color="primary" style={{ fontSize: "50px" }} />
</div>
{/* <Text numberOfLines={1} style={{ marginLeft: '3%' }}>{rowData[this.props.type].title}</Text> */}
<Tooltip title={<Typography variant="body2">{rowData[this.props.type].title}</Typography>}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginLeft: '3%', cursor: 'pointer' }}>
<TextTruncate
line={2}
element="span"
truncateText="…"
text={rowData[this.props.type].title}
//textTruncateChild={<a href="#">Read on</a>}
/></div>
</Tooltip>
</div>);
}
else {
return (<div style={{ display: 'flex', width: '200px' }}>
<div style={{ display: 'contents' }}><OndemandVideoRoundedIcon color="primary" style={{ fontSize: "50px" }} />
</div>
{/* <Text style={{ marginLeft: '3%',minWidth:'0' }}>{rowData[this.props.type].title}</Text> */}
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginLeft: '3%' }}><TextTruncate
line={2}
element="span"
truncateText="…"
text={rowData[this.props.type].title}
//textTruncateChild={<a href="#">Read on</a>}
/></div>
</div>);
}
}
else if (this.props.type == Constants.ADMIN_TYPE_IOGP) {
return (<div style={{ display: 'flex', width: '200px' }}>
<div style={{ marginLeft: '3%' }}>{rowData.attachments[0].orignalFileName}</div>
</div>);
}
}
getTitleColumn = () => {
return ({
title: 'Title',
field: `${this.props.type}.title`,
// render: (rowData) => rowData[this.props.type].title,
render: (rowData) => this.getImageorVideoLogo(rowData),
customSort: (a, b) => {
let aVal = "";
let bVal = "";
if (this.props.type === Constants.ADMIN_TYPE_IOGP) {
aVal = a.attachments[0].orignalFileName;
bVal = b.attachments[0].orignalFileName;
}
else {
aVal = a[this.props.type].title;
bVal = b[this.props.type].title;
}
aVal = String(aVal).toLowerCase();
bVal = String(bVal).toLowerCase();
return (
aVal < bVal ? -1 : 1
)
},
// this.props.type === Constants.ADMIN_TYPE_ALERT ? String(a.alert.title).toLowerCase() < String(b.alert.title).toLowerCase() ? -1 : 1 :
// this.props.type === Constants.ADMIN_TYPE_NOTIFFICATION ? String(a.notification.title).toLowerCase() < String(b.notification.title).toLowerCase() ? -1 : 1 :
// String(a.iogp.title).toLowerCase() < String(b.iogp.title).toLowerCase() ? -1 : 1,
customFilterAndSearch: (term, rowData) => {
let compareVal = "";
if (!rowData.attachments[0])
return
if (this.props.type === Constants.ADMIN_TYPE_IOGP)
compareVal = rowData.attachments[0].orignalFileName;
else
compareVal = rowData[this.props.type].title;
compareVal = String(compareVal).toLowerCase();
return compareVal.includes(term.toLowerCase())
},
})
}
控制台图像可见消息数据包含所有警报数据，而行数据仍然具有通知数据
整个代码只是组件
我不明白我的消息数据是否已更新，为什么材料表自定义渲染中的 rowData 未更新列。