JS中同步调用函数答案

【问题标题】：Call functions synchronously in JSJS中同步调用函数
【发布时间】：2020-07-19 09:55:59
【问题描述】：

我想在函数执行后调用 React 中的 API。

    const [isVisible, setVisible] = useState(false);
    const [isValid, setValidation] = useState(true);
    const [validationMessage, setValidationMessage] = useState('');

const validate = (callback) => {
        if (code == null || code.trim().length === 0) {
            setValidation(false);
            setValidationMessage(translate.signIn.codeErrorMessage);
            setVisible(true);
        } else if (phoneNumber == null || phoneNumber.trim().length === 0) {
            setValidation(false);
            setValidationMessage(translate.signIn.phoneErrorMessage);
            setVisible(true);
        } 
        callback();
    }

    const authenticate = async () => {
        try {
            return await (authenticateUser.get('/abc', {
                params: {
                    code,
                    phoneNumber,
                }
            }));
        }
        catch (e) {
            setValidationMessage(translate.signIn.exceptionMessage);
            setVisible(true);
        }
    }

    const validateUserCredentials = () => {
        if (isValid) {
            setActivitySpinner(true);
            authenticate().then(response => {
                setActivitySpinner(false);
                const responseData = response.data;
                console.log('responseData', responseData);
                if(responseData.status !== 200) {
                    setVisible(true);
                    setValidationMessage(responseData.message);
                }
                else if(responseData.status === 200) {
                    console.log('success');
                }
            });
        }
    }

  const onSubmit = () => {
        validate(validateUserCredentials);
    }

当我调用“onSubmit”函数时，即使 isValid 的值为 false。我可以看到正在调用 API。我只想在函数 validate 完成其任务后调用函数 validateUserCredentials。

谁能告诉我我在这里做错了什么？

【问题讨论】：

您的代码必须工作正常，您可能对状态更新的异步性质感到困惑。如果有帮助，请检查此答案stackoverflow.com/questions/62846824/…

标签： javascript reactjs async-await

【解决方案1】：

Ciao，肯定validateUserCredentials 是在validate 之后调用的，也许您会感到困惑，因为在validateUserCredentials 上，即使您设置为false，您也会看到isValid 仍然为true。不幸的是，使用 Hooks，您无法将回调作为 this.setState 来确定 isValid 已设置。你可以做的是：

const validate = (callback) => {
    let isvalid_temp = isValid;
    if (code == null || code.trim().length === 0) {
        setValidation(false);
        isvalid_temp = false;
        setValidationMessage(translate.signIn.codeErrorMessage);
        setVisible(true);
    } else if (phoneNumber == null || phoneNumber.trim().length === 0) {
        setValidation(false);
        isvalid_temp = false;
        setValidationMessage(translate.signIn.phoneErrorMessage);
        setVisible(true);
    } 
    callback(isvalid_temp);
}

const validateUserCredentials = (isvalid_temp) => {
    if (isvalid_temp) {
        setActivitySpinner(true);
        authenticate().then(response => {
            setActivitySpinner(false);
            const responseData = response.data;
            console.log('responseData', responseData);
            if(responseData.status !== 200) {
                setVisible(true);
                setValidationMessage(responseData.message);
            }
            else if(responseData.status === 200) {
                console.log('success');
            }
        });
    }
}

【讨论】：