react material-table 单击时不会呈现图标
react material-table won't render icon when clicked
找了几天。直到现在我都想不通。
单击时，我希望我的可见性图标更改为隐藏。但我不知道为什么它不自动渲染。我必须在搜索栏上输入内容才能获得 visibility_off 图标。
我阅读了文档，但它不起作用
https://material-table.com/#/docs/features/actions
而这个 https://material-table.com/#/docs/features/component-overriding
这是我的代码
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//find index
console.log(data[row.tableData.id]);
//change the data value
data[row.tableData.id].isActive = 0;
//set data with new data
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
这是完整代码。
const [tableConfig, setTableConfig] = useState({
columns:[
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data:[
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
actions:[
{
icon: "play_arrow",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => {
// console.log(row.tableData.id);
//cari indeks
/*console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].configName = "ase";
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
}
},
{
icon: "file_copy",
tooltip: "Clone",
onClick: () => {
console.log("clone button is clicked");
}
},
{
icon: "delete",
tooltip: "Delete",
onClick: () => {
console.log("Delete button is clicked");
}
},
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//cari indeks
console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].isActive = 0;
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
)
]
});
这就是结果。请帮我。谢谢。
注意：因为我的名声。我无法在此处 post 图片。抱歉
首先你可以分开你的动作数组。
const actions = [
{
icon: "description",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => { }
}, {
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => { },
},
(rowData) => {
return {
icon: rowData.isActive === 1 ? 'visibility_off' : 'visibility',
tooltip: "Hide Row",
onClick: (event, row) => {
clickHandler(row)
}
}
}
];
const [tableConfig, setTableConfig] = React.useState({
columns: [
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data: [
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
});
如您所见，我在您的操作数组中添加了 clikHandler() 函数。这是为了设置你的表配置。您以错误的方式设置了 tableConfig。您可以查看如何设置不可变的状态。
const clickHandler = (rowData) => {
setTableConfig({
columns: [...tableConfig.columns],
data: tableConfig.data.map((item, index) => {
if (index !== rowData.tableData.id) {
return { ...item }
}
return {
...item,
isActive: item.isActive === 1 ? 0 : 1
}
})
});
}
顺便说一句，您应该将 jsx 部分中的操作更改为 actions={actions}
你可以看到工作示例
备注
在功能组件中，setState 不会假装合并整个状态。你必须自己合并。
找了几天。直到现在我都想不通。 单击时，我希望我的可见性图标更改为隐藏。但我不知道为什么它不自动渲染。我必须在搜索栏上输入内容才能获得 visibility_off 图标。
我阅读了文档，但它不起作用 https://material-table.com/#/docs/features/actions 而这个 https://material-table.com/#/docs/features/component-overriding
这是我的代码
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//find index
console.log(data[row.tableData.id]);
//change the data value
data[row.tableData.id].isActive = 0;
//set data with new data
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
这是完整代码。
const [tableConfig, setTableConfig] = useState({
columns:[
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data:[
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
actions:[
{
icon: "play_arrow",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => {
// console.log(row.tableData.id);
//cari indeks
/*console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].configName = "ase";
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
}
},
{
icon: "file_copy",
tooltip: "Clone",
onClick: () => {
console.log("clone button is clicked");
}
},
{
icon: "delete",
tooltip: "Delete",
onClick: () => {
console.log("Delete button is clicked");
}
},
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//cari indeks
console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].isActive = 0;
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
)
]
});
这就是结果。请帮我。谢谢。
注意：因为我的名声。我无法在此处 post 图片。抱歉
首先你可以分开你的动作数组。
const actions = [
{
icon: "description",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => { }
}, {
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => { },
},
(rowData) => {
return {
icon: rowData.isActive === 1 ? 'visibility_off' : 'visibility',
tooltip: "Hide Row",
onClick: (event, row) => {
clickHandler(row)
}
}
}
];
const [tableConfig, setTableConfig] = React.useState({
columns: [
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data: [
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
});
如您所见，我在您的操作数组中添加了 clikHandler() 函数。这是为了设置你的表配置。您以错误的方式设置了 tableConfig。您可以查看如何设置不可变的状态。
const clickHandler = (rowData) => {
setTableConfig({
columns: [...tableConfig.columns],
data: tableConfig.data.map((item, index) => {
if (index !== rowData.tableData.id) {
return { ...item }
}
return {
...item,
isActive: item.isActive === 1 ? 0 : 1
}
})
});
}
顺便说一句，您应该将 jsx 部分中的操作更改为 actions={actions}
你可以看到工作示例
备注
在功能组件中，setState 不会假装合并整个状态。你必须自己合并。