node.js - e.preventDefault() 不是函数 NextJS/React

Question

我发现的关于此问题的唯一其他答案是事件未传递给函数的答案。这里情况不同。我显然将事件作为变量 e 传递。我的按钮类型为提交，因此表单正在随事件一起提交。此外，handleChange 函数可以与该事件一起正常工作。我从我正在参加的 Udemy 类(class)中复制了这个格式，并且我几乎拥有完全相同的东西。我能想到的唯一大的区别是，Udemy 类(class)将所有这些逻辑都放在一个单独的组件中，该组件被导入然后呈现到页面，其中表单和表单处理逻辑是该页面上的主要组件。

请查看我的代码并告诉我我做错了什么!

错误:

代码:

import React, { useState, useEffect } from 'react'
import Router, { withRouter } from 'next/router';
import Layout from '../../components/Layout';
import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { createPatient } from '../../actions/patient';

const CreatePatient = ({ router }) => {

    const [ values, setValues ] = useState({
        error: '',
        formData: '',
        data: ''
    });

    const { error, formData } = values;

    useEffect(() => {
        setValues({
            ...values,
            formData: new FormData()
        })
    }, [router])

    const createPatient = (e) => {
        e.preventDefault();
        
        createPatient(formData).then(data => {
            if (data.error) {
                setValues({ ...values, error: data.error });
            }
        })
    }

    const handleChange = name => e => {
        const value = e.target.value;
        
        formData.set(name, value);

        setValues({ ...values, [name]: value, formData, error: '' });
    }

    return (
        <Layout>
            <section className="container pt-3">
                <form className="form" onSubmit={ createPatient }>
                    <div className="row">
                        <div className="col-md-4 my-2">
                            <label htmlFor="firstName">First Name</label>
                            <input type="text" className="form-control" name="firstName" id="firstName" onChange={handleChange('firstName')}/>
                        </div>
                        <div className="col-md-4 my-2">
                            <label htmlFor="lastName">Last Name</label>
                            <input type="text" className="form-control" name="lastName" id="lastName" onChange={handleChange('lastName')}/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-sm-2">
                            <button type="submit" className="btn btn-primary">Create</button>
                        </div>
                    </div>
                </form>
            </section>
        </Layout>
    )
}

export default withRouter(CreatePatient);

Answer 1

您正在 createPatient 内部调用 createPatient，同时传递非事件。而不是这个:

const createPatient = (e) => {
    e.preventDefault();
        
    createPatient(formData).then(data => {
        if (data.error) {
            setValues({ ...values, error: data.error });
        }
    })
}

只需将其更改为类似这样的内容:

const createPatient = (e) => {
    e.preventDefault();
        
    // run your API call here, then...
    if (data.error) {
        setValues({ ...values, error: data.error });
    }
}