Question

我有一个日历应用，用户可以为每个日历页面上传1-4张图像。

预期结果： 当用户上传质量不佳的图片时，我会有一个质量警告吐司，每个图片应该出现一次。

当前结果： 目前，showToast中的动作useEffect已被多次触发。所以当我上传新图像时，删除另一张图像等。每次再次触发此质量警告时。

我的方法： 我尝试实现本地状态以切换布尔值（如果警告仅显示一次，则设置为false ）。但是我只能让它适用于所有图像（任何图像质量差时，本地状态就会设置为false）。但是我需要它是特定于图像的。

如果已显示特定图像的质量警告，则不再显示。

代码：

export const useShowPoorImageQualityToast = (spreadId: string): void => {
    const dispatch = useDispatch();

    const [qualityToastIsShown, setQualityToastWasShown] = useState(false); // my approach

    const poorQualityContentIds = useSelector(
        (state: AppState) =>
            spreadWithImageContentsSelector(state, spreadId).filter((contentId) => {
                const qualityInformation = productImageQualitySelector(state, contentId);

                return qualityInformation !== undefined && qualityInformation.hasPoorQuality
            }),
        shallowEqual
    );

    useEffect(() => {
        const imageQualityWarningToast: ClosableToast = {
            mode: ToastMode.CLOSABLE,
            text: locale.photoQualityWarning.toast,
            severity: ToastSeverity.WARN,
            closable: false,
        };

        if (poorQualityContentIds.length > 0 && qualityToastIsShown === false) {

            dispatch(showToast(ToastType.NONE, imageQualityWarningToast));

            setQualityToastWasShown(!qualityToastIsShown); // my approach
        }
    }, [dispatch, poorQualityContentIds, qualityToastIsShown]);
};

Answer 1

我以前曾研究过这种问题，但我认为这不是最理想的。

所以我要做的是，不是存储一个布尔值，而是存储每个图像的图像ID或引用，然后检查该图像ID中存储的布尔值。这样，您每次只为一个特定图像设置标志，并仅对其进行检查。

因此，在本地状态下存储以下内容：

{
  image1: { warningShown: true },
  image2: { warningShown: false }
}

Redux：如何仅在useEffect中调度一次操作？

1 个答案: