diff --git a/superset-frontend/src/explore/components/controls/withAsyncVerification.tsx b/superset-frontend/src/explore/components/controls/withAsyncVerification.tsx index 39e3021e7..5ed60aea4 100644 --- a/superset-frontend/src/explore/components/controls/withAsyncVerification.tsx +++ b/superset-frontend/src/explore/components/controls/withAsyncVerification.tsx @@ -24,6 +24,7 @@ import { import { JsonArray, JsonValue, t } from '@superset-ui/core'; import { ControlProps } from 'src/explore/components/Control'; import builtInControlComponents from 'src/explore/components/controls'; +import useEffectEvent from 'src/hooks/useEffectEvent'; /** * Full control component map. @@ -72,7 +73,7 @@ export type AsyncVerify = ( * Whether the extra props will update the original props. */ function hasUpdates( - props: ControlPropsWithExtras, + props: Partial, newProps: ExtraControlProps, ) { return ( @@ -165,17 +166,17 @@ export default function withAsyncVerification({ [basicOnChange, otherProps, verifiedProps], ); - useEffect(() => { - if (needAsyncVerification && verify) { + const verifyProps = useEffectEvent( + (verifyFunc: AsyncVerify, props: typeof otherProps) => { if (showLoadingState) { setIsLoading(true); } - verify(otherProps) + verifyFunc(props) .then(updatedProps => { if (showLoadingState) { setIsLoading(false); } - if (updatedProps && hasUpdates(otherProps, updatedProps)) { + if (updatedProps && hasUpdates(verifiedProps, updatedProps)) { setVerifiedProps({ // save isLoading in combination with other props to avoid // rendering twice. @@ -198,14 +199,14 @@ export default function withAsyncVerification({ ); } }); + }, + ); + + useEffect(() => { + if (needAsyncVerification && verify) { + verifyProps(verify, otherProps); } - }, [ - needAsyncVerification, - showLoadingState, - verify, - otherProps, - addWarningToast, - ]); + }, [needAsyncVerification, verify, otherProps, verifyProps]); return (