在 React JS 中重试 useEffect

Question

我有一个功能组件，它从 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。

Answer 1

发生错误时，“密码”值未更改。向密码添加一些值（或一些更改以在 useEffect 依赖项数组中指示）。onClick={() => {&nbsp; &nbsp; setRetry(false);&nbsp; &nbsp; setPassword("some value");}}