Question

我想知道为什么repeat在我的帖子请求中不起作用。当我单击“保存设置”按钮时，页面将重新加载。如果我只是在event.preventDefault后面加上console.log，就可以了，所以问题就出在我的请求中。这是代码，不胜感激。

event.preventDefault()

这是我的JSX代码：

import React, { useEffect, useState } from 'react'
import Button from '../shared/formElements/Button';
import { useHttpClient } from '../shared/hooks/http-hook';
import { useForm } from '../shared/hooks/form-hook';
    ...
    ...

    const Settings = () => {
        const { isLoading, error, sendRequest, clearError } = useHttpClient();
        const [loadedSettings, setLoadedSettings] = useState();
        const [formState, inputHandler] = useForm(
        {
            hostname:
            {
                value: '',
                isValid: false
            },
            username:
            {
                value: '',
                isValid: false
            },
            password:
            {
                value: '',
                isValid: false
            },
    
    ...
    ...
            const settingsSubmitHandler = async event => {
                    event.preventDefault()
                    try {
                        await sendRequest(
                            'http://localhost/api/settings/save',
                            'POST',
                            JSON.stringify({
                                hostname: formState.inputs.hostname.value,
                                username: formState.inputs.username.value,
                                password: formState.inputs.password.value,
                                ...
            
                                ...
                        }),
                        {
                            'Content-Type': 'application/json'
                        }
                    );
                } catch (err) { }
            };

Answer 1

可能是因为您使用了async函数，并且在下一个滴答中调用了函数主体。如果从函数定义中删除async，它应该可以工作：

const settingsSubmitHandler = event => {
  event.preventDefault()
  sendRequest(...).then(()=> {
    // some async code here
  })
}

Answer 2

问题似乎出在{!isLoading && loadedSettings && (，现在删除!isLoading可以正常工作。

反应-event.preventDefault（）不适用于提交

2 个答案: