0

我正在为 React 项目使用带有 Redux 工具包的 RTK 查询。使用 RTK 突变提供的“updateProductCategory”函数更新表行。但是在更新每个表行之后，“updateProductCategoryResult”会填充该更新行的数据和状态（这意味着，如果更新成功，则“isSuccess”=true）。

因此，对于下一次更新，当“isSuccess”突变状态为“true”时，SnackBar（即烤面包机）将在打开编辑行的模态表单时弹出（在实际编辑发生之前）。所以，为了避免这种不需​​要的 Snack Bar 弹出，我想在突变发生后重置突变结果的数据和状态，即“updateProductCategoryResult”有 isSuccess = false, isError = false 。

基本上我需要像 React Query 突变一样的 reset() 函数。

我搜索了 RTK 查询文档，但找不到任何与重置突变状态和数据相关的内容。

代码：

//State to open SnackBar
const [snackBarProps, setSnackBarProps] = useState({
    alertType: "",
    message: "",
  });

// Hooks to fetch product category
const { data = [], isFetching } = useGetProductCategoryQuery(queryBody);

//Hook to update product category
const [updateProductCategory, updateProductCategoryResult] = useUpdateProductCategoryMutation();

// SnackBar while "Updating Category".
// Bug occured here, as "updateProductCategoryResult.isSuccess" will be  
// true after every successful update, which changes the "snackBarProps" 
// state by calling "setSnackBarProps" and pops the Snack Bar when just 
// opening the modal to edit row data of the table.

  useEffect(() => {
    if (updateProductCategoryResult.isError) {
      setSnackBarProps({
        alertType: "error",
        message: "Updating Product Category Failed !!!",
      });
    }

    if (updateProductCategoryResult.isSuccess) {
      setSnackBarProps({
        alertType: "success",
        message: "Updated Product Category Successfully !!!",
      });

      dispatch(closeModal());
    }

    return () => {
      setSnackBarProps({
        alertType: "",
        message: "",
      });
    };
  }, [updateProductCategoryResult, isFetching]);
4

1 回答 1

0

只需使用不同的依赖数组 - 现在它会在每次更改时触发updateProductCategoryResult- 但您希望它触发 ifisError或isSuccesschange：

 [updateProductCategoryResult.isError, updateProductCategoryResult.isSuccess, isFetching]);
于 2021-07-17T08:45:13.047 回答