为了账号安全,请及时绑定邮箱和手机立即绑定

在 React JS 中重试 useEffect

在 React JS 中重试 useEffect

慕仙森 2023-01-06 09:48:28

我有一个功能组件,它从 API 获取一些数据并将其显示在页面的某个位置,问题是发生错误时我想显示一个重试按钮以再次调用 API。所以我这样做了:


import React, {useEffect, useState} from "react";

import api from "../../../api";

import {useSnackbar} from "notistack";


const ShowPassword = ({uuid}) => {

    const [password, setPassword] = useState(null);

    const [retry, setRetry] = useState(false);

    const {enqueueSnackbar} = useSnackbar();

    useEffect(() => {

        api.showPassword(uuid)

            .then(res => {

                setPassword(res.data.password);

            })

            .catch(err => {

                setRetry(true);

                enqueueSnackbar('An error occured...', {variant: 'error'});

            })

    }, [password]);


    return (

        <div>

            {

                retry

                    ? <button onClick={() => {

                        setRetry(false);

                        setPassword(null);

                    }} type='button'>Retry</button>

                    : <span>{password ?? 'Loading...'}</span>

            }

        </div>

    );

};


export default ShowPassword;

但是通过单击“重试”按钮,它会显示,Loading...但不会再次调用 API。


查看完整描述

1 回答

?
暮色呼如

TA贡献1587条经验 获得超9个赞

发生错误时,“密码”值未更改。向密码添加一些值(或一些更改以在 useEffect 依赖项数组中指示)。


onClick={() => {

    setRetry(false);

    setPassword("some value");

}}


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 13 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信