Блог

У меня есть функциональный компонент, который извлекает некоторые данные из 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 больше вызываться не будет.

в случае ошибки значение «пароль» не изменилось. Добавьте некоторое значение к паролю (или какое-либо изменение для указания в массиве зависимостей useEffect).

 onClick={() => {
    setRetry(false);
    setPassword("some value");
}}