如何在需要时停止反应材料表加载

Posted 2023-02-22

【中文标题】如何在需要时停止反应材料表加载

【英文标题】：How to stop react material table loader whent it's need

【发布时间】：2021-04-30 21:39:30

【问题描述】：

我想在自定义错误消息显示时停止材料表加载器。这是我的材料表组件。而且我还需要知道当条件为假时如何创建自定义错误消息，就像 toaster 一样。这是我的尝试。请让我知道是否有办法这样做。因为我完全是材料表的初学者。

const tableIcons = 
    Add: forwardRef((props, ref) => <AddBox ...props ref=ref />),
    Check: forwardRef((props, ref) => <Check ...props ref=ref />),
    Clear: forwardRef((props, ref) => <Clear ...props ref=ref />),
    Delete: forwardRef((props, ref) => <DeleteOutline ...props ref=ref />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight ...props ref=ref />),
    Edit: forwardRef((props, ref) => <Edit ...props ref=ref />),
    Export: forwardRef((props, ref) => <SaveAlt ...props ref=ref />),
    Filter: forwardRef((props, ref) => <FilterList ...props ref=ref />),
    FirstPage: forwardRef((props, ref) => <FirstPage ...props ref=ref />),
    LastPage: forwardRef((props, ref) => <LastPage ...props ref=ref />),
    NextPage: forwardRef((props, ref) => <ChevronRight ...props ref=ref />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft ...props ref=ref />),
    ResetSearch: forwardRef((props, ref) => <Clear ...props ref=ref />),
    Search: forwardRef((props, ref) => <Search ...props ref=ref />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward ...props ref=ref />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove ...props ref=ref />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn ...props ref=ref />)
  ;

const Table = (columns, data, setData, required) => 
    const [isLoading, setIsLoading] = useState(false);
    const [tableError, setTablesError] = useState();

    useEffect(() => 
        //showing error message
      ,
      [tableError]
    );

    return (
        <MaterialTable
        columns=columns
        data=data
        icons=tableIcons
        options=
          showTitle:false,
          search:false, 
          paging:false,
          actionsColumnIndex:4,
          addRowPosition:'first',
        
        editable=
          onRowAdd: newData => 
            new Promise((resolve, reject) => 
              let error = [];
              if(required.length > 0)
                var result = Object.keys(newData).map((key) => [key, newData[key]]);
                required.forEach(function(value)
                if(!result.some(row => row.includes(value)))
                    error.push(value)
                  ;
                )
              
              if(error.length > 0)
                setTablesError(error:'1', columns:error, msg:'validation');
              else
                setTablesError(error:'0', columns:'', msg:'');
                setTimeout(() => 
                  setData([...data, newData]);
                  resolve();
                , 1000)
              
            ),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => 
              setTimeout(() => 
                const dataUpdate = [...data];
                const index = oldData.tableData.id;
                dataUpdate[index] = newData;
                setData([...dataUpdate]);
                resolve();
              , 1000)
            ),
          onRowDelete: oldData =>
            new Promise((resolve, reject) => 
              setTimeout(() => 
                const dataDelete = [...data];
                const index = oldData.tableData.id;
                dataDelete.splice(index, 1);
                setData([...dataDelete]);
                resolve()
              , 1000)
            ),
        
      />
    )
  

export default Table;

先谢谢了！

【参考方案1】：

这是 promise 调用，如果你想停止 loader 调用 resolve() 函数。 它将解决 promise 调用并且加载器将停止。