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

Question

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

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;

谢谢是提前！

标签： reactjsmaterial-tablereact-material

Answer 1

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