Javascript 如何在react中的任何用户操作时重新呈现MUI数据表_Javascript_Reactjs_Axios_Material Ui_React Hooks

Javascript 如何在react中的任何用户操作时重新呈现MUI数据表

javascript reactjs material-ui

Javascript 如何在react中的任何用户操作时重新呈现MUI数据表,javascript,reactjs,axios,material-ui,react-hooks,Javascript,Reactjs,Axios,Material Ui,React Hooks,我有一个锁定解锁按钮和一个删除按钮，所以问题是当我使用useEffect hook从axios渲染数据时，它会工作，但如果我锁定或解锁用户，表不会自动更改。这意味着axios不会被调用在这种情况下，如果我将useState钩子放在useEffect中，API将被多次调用，这与预期不同。在这种情况下，任何人都可以建议我如何在用户单击锁定解锁按钮时重新呈现数据表仅供参考，锁定解锁功能100%正常工作。需要做的是，我必须转到另一个页面，然后再次回到我的datatable页面以查看更改代码段： c

我有一个锁定解锁按钮和一个删除按钮，所以问题是当我使用useEffect hook从axios渲染数据时，它会工作，但如果我锁定或解锁用户，表不会自动更改。这意味着axios不会被调用

在这种情况下，如果我将useState钩子放在useEffect中，API将被多次调用，这与预期不同。在这种情况下，任何人都可以建议我如何在用户单击锁定解锁按钮时重新呈现数据表

仅供参考，锁定解锁功能100%正常工作。需要做的是，我必须转到另一个页面，然后再次回到我的datatable页面以查看更改

代码段：

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1)
  },
  input: {
    display: "none"
  }
}));
/*
    Customization of mui
 */
const getMuiTheme = () => createMuiTheme({
  overrides: {
    MUIDataTableBodyCell: {
      root: {
        backgroundColor: "#FFFFFE"
      }
    }
  }
});

/* eslint-disable */
const UserDetailsDatatable = () => {
  // console.log('POS: ' + localStorageService.getItem("auth_user"));

  if(localStorageService.getItem("auth_user") == null){
    history.push({
      pathname: "/session/signin"
    });
  }
    
    const [responsive, setResponsive] = useState("vertical");
    const [dataRenderHook, setDataRenderHook] = useState([]);
    const [tableBodyHeight, setTableBodyHeight] = useState("650px");
    const [tableBodyMaxHeight, setTableBodyMaxHeight] = useState("");
    
    const classes = useStyles();

    // Redirect to edit
    const newMountpage = (rowData) => {
      var pickedUpRowData = rowData.rowData;
      let path = `/Admin/users/editUser`; 
      history.push({
        pathname: path,
        state: {detail: pickedUpRowData} 
      });
    };

    /* Deletion */
    const deleteRow = (rowDatam) => {
      deleteUser(rowDatam);
      
    };
    /* User Locker/Unlocker */
    const LockerUnlocker = (Iopticore_ID, state) => {
      console.log('State: '+ state);
      lockerUnlocker(Iopticore_ID, Boolean(state));
    }

    const ChangeHandler = (event) => {
      console.log(event);
    };
  
    const columns = [
    {
      name: "userID",
      label: "Iopticore_ID",
      options: {
        filter: true,
        sort: true,
      }
      },
    {
      name: "userName",
      label: "Corporate ID",
      options: {
       filter: true,
       sort: true,
      }
     },
     {
      name: "name",
      label: "User Name",
      options: {
       filter: true,
       sort: true,
      }
     },
     {
      name: "email",
      label: "Email",
      options: {
       filter: true,
       sort: true,
      }
     },
     {
      name: "role",
      label: "Role",
      options: {
       filter: true,
       sort: true,
      }
     },
     {
      name: "external",
      label: "IsExternal",
      options: {
        filter: true,
        sort: true,
        filterOptions: {
          names: ["Yes", "No"],
          logic(v, filterVal) {
            const show =
              (filterVal.indexOf("Yes") >= 0 && ( v === true || v === 'true') ) ||
              (filterVal.indexOf("No") >= 0 && ( v === false || v === 'false') );
            return !show;
          }
        },
        customBodyRender: (val) => {
          return val === true ? "Yes" : "No";
        }
      }
     },
    {
      name: "locked",
      label: "Access",
      options: {
        filter: true,
        sort: true,
        empty: true,
        filter: true,
        sort: true,
        filterOptions: {
          names: ["Yes", "No"],
          logic(v, filterVal) {
            const show =
              (filterVal.indexOf("Yes") >= 0 && ( v === true || v === 'true') ) ||
              (filterVal.indexOf("No") >= 0 && ( v === false || v === 'false') );
            return !show;
          }
        },
        customBodyRender: (val, tableMeta) => {
          //console.log('v: ' + val + ' ' + JSON.stringify(tableMeta))  ;
          return val === true ? (
            <Fab 
              size="small" 
              variant="extended" 
              aria-label="Delete"
              className={classes.button}
              color="default"
              onClick={() => LockerUnlocker(tableMeta.rowData[0], tableMeta.rowData[6])}
              >
              <img src="https://img.icons8.com/plasticine/25/000000/unlock.png"/>
              &nbsp;<b>UnLock&nbsp;</b>
            </Fab>
          ) : (
            <Fab 
              size="small" 
              variant="extended" 
              aria-label="Delete"
              className={classes.button}
              color="default"
              onClick={() => LockerUnlocker(tableMeta.rowData[0])}
              >
              <img src="https://img.icons8.com/dusk/25/000000/unlock.png"/>
              <b>&nbsp;&nbsp;Lock&nbsp;&nbsp;&nbsp;&nbsp;</b>
            </Fab>
          );
        }
      }
    },
     {
      name: "Edit",
      options: {
        filter: true,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <Fab 
            size="small" 
            color="primary" 
            aria-label="Edit" 
            className={classes.button}
            onClick={() => newMountpage(tableMeta)}
            >
              <Icon>edit_icon</Icon>
            </Fab>
          );
        }
      }
    },
    {
      name: "Delete",
      options: {
        filter: true,
        textAlign: 'center',
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <Fab size="small" 
            color="secondary" 
            aria-label="Edit" 
            className={classes.button}
            onClick={() => deleteRow(tableMeta.rowData[0])}
            >
              <Icon>delete_icon</Icon>
            </Fab>
          );
        }
      }
    }];
  
    const options = {
      selectableRows: 'none',
      filter: true,
      textAlign: 'center',
      filterType: "dropdown",
      rowsPerPage: 5,
      pagination: true,
      responsive,
      enableNestedDataAccess: '.',
      tableBodyHeight,
      tableBodyMaxHeight
    };
    
    var recentReceivedToken = localStorage.getItem('jwtAuthtokenManager');
    
    
    var res= [];
      useEffect(() => { 
        
        (async () => {
          res = await axios.get('<URL>', {
            headers: {"Authorization" : `Bearer  ${recentReceivedToken}`}
          }, 
          // console.log('Hola : ' + JSON.stringify(res))
      )
      .catch((error)=> {
        if(error.response.status != 200){
          swal({
            title: "Opps! Access Denied",
            imageUrl: 'https://notionpress.com/new-rewamp/images/404-error.gif',
            text: "You Might Not Have Access To This Page.",
            icon: "error",
          });
        } 
      })
      //console.log('Res : ' + JSON.stringify(res));
      setDataRenderHook(res.data);
      
      })();        
      }, []);
      
    //console.log('Data Promise : ' + renderDatatable());
    if(dataRenderHook.length === 0){
      //console.log('Length: 0');
      return(
        <React.Fragment>
          <div style={{padding:40}}>
          
          <MuiThemeProvider theme={getMuiTheme()}>
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center"
            }}
          >
          <LinearBuffer />
          </div>
          </MuiThemeProvider>
          
          </div>    
          
        </React.Fragment>
      )
    }else{
      //console.log('Length: 1');    
      return (
        <React.Fragment>
          <div style={{padding:40}}>
          
          <MuiThemeProvider theme={getMuiTheme()}>
          <MUIDataTable
            title={"IoptiCore User List"}
            data={dataRenderHook}
            columns={columns}
            options={options}
          />
          </MuiThemeProvider>
          
          </div>    
          
        </React.Fragment>
      );
    }
    
}

export default UserDetailsDatatable;

const useStyles=makeStyles（主题=>({
按钮：{
页边空白：主题。间距（1）
},
输入：{
显示：“无”
}
}));
/*
定制mui
*/
const getmuiteme=（）=>createmuiteme({
覆盖：{
MUIDataTableBodyCell：{
根目录：{
背景颜色：“FFFFF E”
}
}
}
});
/*eslint禁用*/
const UserDetailsDatatable=（）=>{
//console.log（'POS:'+localStorageService.getItem（“auth_user”））；
if（localStorageService.getItem（“auth_user”）==null）{
历史推送({
路径名：“/session/signin”
});
}
const[responsive，setResponsive]=使用状态（“垂直”）；
const[dataRenderHook，setDataRenderHook]=useState（[]）；
const[tableBodyHeight，setTableBodyHeight]=使用状态（“650px”）；
const[tableBodyMaxHeight，setTableBodyMaxHeight]=useState（“”）；
const classes=useStyles（）；
//重定向到编辑
常量newMountpage=（行数据）=>{
var pickedprowdata=rowData.rowData；
让路径=`/Admin/users/editUser`；
历史推送({
路径名：路径，
状态：{详细信息：pickedUpRowData}
});
};
/*删除*/
常量deleteRow=（rowDatam）=>{
删除用户（rowDatam）；
};
/*用户锁定/解锁器*/
常量LockerUnlocker=（Iopticore\u ID，状态）=>{
log（'State:'+State）；
lockerUnlocker（Iopticore_ID，布尔值（状态））；
}
常量ChangeHandler=（事件）=>{
console.log（事件）；
};
常量列=[
{
名称：“用户ID”，
标签：“Iopticore_ID”，
选项：{
过滤器：对，
排序：对，
}
},
{
名称：“用户名”，
标签：“公司ID”，
选项：{
过滤器：对，
排序：对，
}
},
{
姓名：“姓名”，
标签：“用户名”，
选项：{
过滤器：对，
排序：对，
}
},
{
名称：“电子邮件”，
标签：“电子邮件”，
选项：{
过滤器：对，
排序：对，
}
},
{
名称：“角色”，
标签：“角色”，
选项：{
过滤器：对，
排序：对，
}
},
{
名称：“外部”，
标签：“IsExternal”，
选项：{
过滤器：对，
排序：对，
过滤器选项：{
姓名：[“是”、“否”]，
逻辑（v，filterVal）{
康斯特秀=
（filterVal.indexOf（“Yes”）>=0&&（v==true | | v==true））||
（filterVal.indexOf（“No”）>=0&&（v==false | | v==false”）；
返回！显示；
}
},
customBodyRender：（val）=>{
返回值===true？“是”：“否”；
}
}
},
{
名称：“已锁定”，
标签：“访问”，
选项：{
过滤器：对，
排序：对，
空：是的，
过滤器：对，
排序：对，
过滤器选项：{
姓名：[“是”、“否”]，
逻辑（v，filterVal）{
康斯特秀=
（filterVal.indexOf（“Yes”）>=0&&（v==true | | v==true））||
（filterVal.indexOf（“No”）>=0&&（v==false | | v==false”）；
返回！显示；
}
},
customBodyRender：（val，tableMeta）=>{
//log（'v:'+val+'+JSON.stringify（tableMeta））；
返回val==true(
LockerUnlocker（tableMeta.rowData[0]，tableMeta.rowData[6]））
>
解锁
) : (
LockerUnlocker（tableMeta.rowData[0]））
>
锁
);
}
}
},
{
名称：“编辑”，
选项：{
过滤器：对，
排序：假，
空：是的，
customBodyRender：（值、tableMeta、updateValue）=>{
返回(
newMountpage（tableMeta）}
>
编辑图标
);
}
}
},
{
名称：“删除”，
选项：{
过滤器：对，
textAlign:'中心'，
排序：假，
空：是的，
customBodyRender：（值、tableMeta、updateValue）=>{
返回(
deleteRow（tableMeta.rowData[0]）}
>
删除图标
);
}
}
}];
常量选项={
selectableRows:“无”，
过滤器：对，
textAlign:'中心'，
filterType:“下拉列表”，
行页码：5，
分页：正确，
反应敏捷的
enableNestedDataAccess:“.”，
床身高度，
床身最大高度
};
var recentReceivedToken=localStorage.getItem（'jwtAuthtokenManager'）；
var-res=[]；
useffect（（）=>{
（异步（）=>{
res=等待axios.get（“”{
标题：{“授权”：`Bearer${recentReceivedToken}`
}, 
//log（'Hola:'+JSON.stringify（res））
)
.catch（（错误）=>{
if（error.response.status！=200）{
游泳({
标题：“Opps！访问被拒绝”，
imageUrl:'https://notionpress.com/new-rewamp/images/404-error.gif',
文本：“您可能无法访问此文件
import React, { useState, useEffect } from "react";
import MUIDataTable from "mui-datatables";
import { makeStyles,createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import { Icon,  Fab } from "@material-ui/core";
import history from "history.js";
import axios from "axios";
import swal from 'sweetalert';
import LinearBuffer from './EditUserHelper/progresscircle';
import lockerUnlocker from './Lock_Unlock/lockerUnlocker';
import deleteUser from './DeleteUser/DeleteUser'
import localStorageService from "../../../services/localStorageService";
import apiDataReturner from "./userAxios";


const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1)
  },
  input: {
    display: "none"
  }
}));
/*
    Customization of mui
 */
const getMuiTheme = () => createMuiTheme({
  overrides: {
    MUIDataTableBodyCell: {
      root: {
        backgroundColor: "#FFFFFE"
      }
    }
  }
});

/* eslint-disable */
const UserDetailsDatatable = () => {
  // console.log('POS: ' + localStorageService.getItem("auth_user"));

  if(localStorageService.getItem("auth_user") == null){
    history.push({
      pathname: "/session/signin"
    });
  }
    
    const [responsive, setResponsive] = useState("vertical");
    const [dataRenderHook, setDataRenderHook] = useState([]);
    const [tableBodyHeight, setTableBodyHeight] = useState("650px");
    const [tableBodyMaxHeight, setTableBodyMaxHeight] = useState("");
    const [tracker, setTracker] = useState();
    
    const classes = useStyles();

    // Redirect to edit
    const newMountpage = (rowData) => {
      var pickedUpRowData = rowData.rowData;
      let path = `/Admin/users/editUser`; 
      history.push({
        pathname: path,
        state: {detail: pickedUpRowData} 
      });
    };

    /* Deletion */
    const deleteRow = (rowDatam) => {
      deleteUser(rowDatam);
      var x = apiDataReturner();
      const promise = new Promise((resolve, reject) => { 
        setTimeout(() => {  
          setTracker(x);
        }, 3000); 
      }); 
        
      promise.then(values => { 
        setDataRenderHook(values); 
      }); 
    };
    /* User Locker/Unlocker */
    const LockerUnlocker = (Iopticore_ID, state) => {
      lockerUnlocker(Iopticore_ID, Boolean(state)); 
      var x = apiDataReturner();
      const promise = new Promise((resolve, reject) => { 
        setTimeout(() => {  
          setTracker(x);
        }, 3000); 
      }); 
        
      promise.then(values => { 
        setDataRenderHook(values); 
      }); 
      
    }

    const ChangeHandler = (event) => {
      console.log(event);
    };
  
    const columns = [
    {
      name: "userID",
      label: "Iopticore_ID",
      options: {
        filter: true,
        sort: true,
        responsive: 'scrollFullHeightFullWidth',
        display: false
      }
    },
    {
      name: "userName",
      label: "Corporate ID",
      options: {
       filter: true,
       responsive: 'scrollFullHeightFullWidth',
       sort: true,
      }
     },
     {
      name: "name",
      label: "User Name",
      options: {
       filter: true,
       responsive: 'scrollFullHeightFullWidth',
       sort: true,
      }
     },
     {
      name: "email",
      label: "Email",
      options: {
       filter: true,
       responsive: 'scrollFullHeightFullWidth',
       sort: true,
      }
     },
     {
      name: "role",
      label: "Role",
      options: {
       filter: true,
       responsive: 'scrollFullHeightFullWidth',
       sort: true,
      }
     },
     {
      name: "external",
      label: "IsExternal",
      options: {
        filter: true,
        sort: true,
        responsive: 'scrollFullHeightFullWidth',
        filterOptions: {
          names: ["Yes", "No"],
          logic(v, filterVal) {
            const show =
              (filterVal.indexOf("Yes") >= 0 && ( v === true || v === 'true') ) ||
              (filterVal.indexOf("No") >= 0 && ( v === false || v === 'false') );
            return !show;
          }
        },
        customBodyRender: (val) => {
          return val === true ? "Yes" : "No";
        }
      }
     },
    {
      name: "locked",
      label: "Access",
      options: {
        filter: true,
        sort: true,
        empty: true,
        filter: true,
        sort: true,
        responsive: 'scrollFullHeightFullWidth',
        filterOptions: {
          names: ["Yes", "No"],
          logic(v, filterVal) {
            const show =
              (filterVal.indexOf("Yes") >= 0 && ( v === true || v === 'true') ) ||
              (filterVal.indexOf("No") >= 0 && ( v === false || v === 'false') );
            return !show;
          }
        },
        customBodyRender: (val, tableMeta) => {
          //console.log('v: ' + val + ' ' + JSON.stringify(tableMeta))  ;
          return val === true ? (
            <Fab 
              size="small" 
              variant="extended" 
              aria-label="Delete"
              className={classes.button}
              color="default"
              onClick={() => LockerUnlocker(tableMeta.rowData[0], tableMeta.rowData[6])}
              >
              <img src="https://img.icons8.com/plasticine/25/000000/unlock.png"/>
              &nbsp;<b>UnLock&nbsp;</b>
            </Fab>
          ) : (
            <Fab 
              size="small" 
              variant="extended" 
              aria-label="Delete"
              className={classes.button}
              color="default"
              onClick={() => LockerUnlocker(tableMeta.rowData[0])}
              >
              <img src="https://img.icons8.com/dusk/25/000000/unlock.png"/>
              <b>&nbsp;&nbsp;Lock&nbsp;&nbsp;&nbsp;&nbsp;</b>
            </Fab>
          );
        }
      }
    },
     {
      name: "Edit",
      options: {
        filter: true,
        sort: false,
        empty: true,
        responsive: 'scrollFullHeightFullWidth',
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <Fab 
            size="small" 
            color="primary" 
            aria-label="Edit" 
            className={classes.button}
            onClick={() => newMountpage(tableMeta)}
            >
              <Icon>edit_icon</Icon>
            </Fab>
          );
        }
      }
    },
    {
      name: "Delete",
      options: {
        filter: true,
        textAlign: 'center',
        sort: false,
        empty: true,
        responsive: 'scrollMaxWidth',
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <Fab size="small" 
            color="secondary" 
            aria-label="Edit" 
            className={classes.button}
            onClick={() => deleteRow(tableMeta.rowData[0])}
            >
              <Icon>delete_icon</Icon>
            </Fab>
          );
        }
      }
    }];
  
    const options = {
      selectableRows: 'none',
      filter: true,
      textAlign: 'center',
      filterType: "dropdown",
      fixedHeaderOptions:true,
      rowsPerPage: 5,
      pagination: true,
      responsive: 'stacked',
      enableNestedDataAccess: '.',
      tableBodyHeight,
      tableBodyMaxHeight
    };
    
    //var recentReceivedToken = localStorage.getItem('jwtAuthtokenManager');
    
    
    var res= [];
      useEffect(() => { 
        var x = apiDataReturner();
        const promise = new Promise((resolve, reject) => { 
          setTimeout(() => { 
              resolve(x); 
          }, 2000); 
        }); 
          
        promise.then(values => { 
          setDataRenderHook(values); 
        });        
      }, [tracker]);      
    
    if(dataRenderHook.length === 0){
      return(
        
        <React.Fragment>
          <div style={{padding:0}}>
          
          <MuiThemeProvider theme={getMuiTheme()}>
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center"
            }}
          >
          <LinearBuffer />
          </div>
          </MuiThemeProvider>
          
          </div>    
          
        </React.Fragment>
      )
    }else{   
      return (
        <div>
        <React.Fragment>
          <div style={{padding:0}}>
          
          <MuiThemeProvider theme={getMuiTheme()}>
          <MUIDataTable
            title={"IoptiCore User List"}
            data={dataRenderHook}
            columns={columns}
            options={options}
          />
          </MuiThemeProvider>
          
          </div>    
          
        </React.Fragment>
        </div>
      );
    }
    
}

export default UserDetailsDatatable;