时间戳

首页 > 解决方案 > React Axios 双表单提交

reactjs - React Axios 双表单提交

问题描述

我正在构建一个 React + PHP API 应用程序，让页面的访问者订阅时事通讯。我也在使用 Hooks、Axios 和 Typescript。我用 Postman 测试了 API，数据按应有的方式提交。但是当我从前端发帖时，数据过来并被插入到数据库中两次——一个正常行和一个空行。

我的前端代码

import React, { FormEvent } from 'react';
import { useForm } from "react-hook-form";
import axios from 'axios';
import { BsArrowRight } from 'react-icons/bs';

interface IFormNewsletter {
    email: string;
    emailProvider: string;
    dateCreated: number;
}

const FormNewsletter: React.FC = () => {

    const { register, handleSubmit } = useForm<IFormNewsletter>();

    const preventDefault = (e: FormEvent) => {
        e.preventDefault();
    }

    const onSubmit = (data: IFormNewsletter) => {

        data.emailProvider = data.email.split('@')[1];
        data.dateCreated = Math.round((new Date()).getTime() / 1000);

        axios.post('http://localhost/mb-backend/api/create', {
            email: data.email,
            emailProvider: data.emailProvider,
            dateCreated: data.dateCreated
          })
          .then((response) => {
            console.log(response);
          }, (error) => {
            console.log(error);
          });
    };
    
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div className="input-box">
                <input ref={register} className="newsletter" type="text" name="email" id="email" placeholder="Type your email address here…&quot; />
                <button type="submit" className="submit" name="submit" id="submit"><BsArrowRight className="submit-arrow" /></button>
            </div>

            <div className="tos-box">
                <label className="check-container">
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                </label>
                <span className="tos-label">I agree to <a href="#">terms of service</a></span>
            </div>
        </form>
    )
}

export default FormNewsletter;

这是插入帖子的方式： 在此处输入图像描述

我尝试的是使用该preventDefault方法，但它完全阻止了表单提交：

<form onSubmit={(e) => {
    e.preventDefault();
    handleSubmit(onSubmit);
}}>

我也尝试使用fetch，axios但结果是一样的。我是 React 新手，希望能得到帮助。

编辑：

后端看起来像这样：

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Access-Control-Allow-Headers,Content-Type,Access-Control-Allow-Methods,Authorization,X-Requested-With');

include_once '../config/Database.php';
include_once '../models/User.php';

$database = new Database();
$db = $database->connect();

$user = new User($db);

$data = json_decode(file_get_contents("php://input"));

$user->dateCreated = $data->dateCreated;
$user->email = $data->email;
$user->emailProvider = $data->emailProvider;

if ($user->create()) {
    echo json_encode(
        array('message' => 'User created')
    );
} else {
    echo json_encode(
        array('message' => 'Could not create user')
    );
}

标签： reactjsaxios

解决方案

添加禁用={formState.isSubmitting}>

<button type="submit" disabled={formState.isSubmitting}> className="submit" name="submit" id="submit"><BsArrowRight className="submit-arrow" /></button>

推荐阅读