在 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={() => {

    setRetry(false);

    setPassword("some value");

}}