我从api(api1)获取数据并发送到表并进行渲染,然后从另一个api(api2)获取一些数据,所以...
//*this get data from api1 and render in table*
const [permissionList, setPermissionList] = useState([]);
async function getPermission() {
try {
const response = await Fetch({
body: null,
type: "GET",
auth: token,
api: "listPermission"
});
const rows = [];
response.permissions.map((row, i) =>
rows.push([row.id, row.method, row.description])
);
setPermissionList(rows);
} catch (err) {
console.log(err);
}
useEffect(() => {
getPermission();
}, []);
//*this code for config selectableRows option dataTable*
const newOption = { ...options }; //options includes other configurations
newOption.selectableRows = "multiple";
<MUIDataTable
className={classes.table}
data={permissionList}
columns={columns}
options={newOption}
/>
//*with this code can get some information from row selected and can access to data render in the row*
newOption.customToolbarSelect = function CustomHeader(
selectedRows, // when selected row information from row in this variable
displayData // when selected row this variable includes all data in table
) {
//*this below code : permissions includes selected row*
let permissions = selectedRows.data.map(
index =>
displayData.filter(i => i.dataIndex === index.dataIndex)[0].data[0]
);
在下面的代码中:我同时选择了(来自api2)和新的,但是问题是当选择了一行时,此函数运行了
// if (data) { //data from another api2
// const ddd = data.permission.map(row =>
// displayData.filter(i => i.data[0] === row.id)
// );
// ddd.map((row, i) => {
// selectedRows = {
// data: [
// ...selectedRows.data,
// { index: row[0].dataIndex, dataIndex: row[0].dataIndex }
// ],
// lookup: {
// ...selectedRows.lookup,
// [row[0].dataIndex]: true
// }
// };
// });
// }
//
// console.log("selectedRows", selectedRows);
// console.log("displayData", displayData);
};