React中使用Axios发送POST请求至Spring Boot接口失败排查

1. 表单默认提交行为未被阻止（拼写错误） #

你的handleSubmit函数中，将阻止默认行为的方法e.preventDefault()拼写成了e.preventDefualt()——这个拼写错误直接导致表单提交时触发默认刷新行为，页面瞬间刷新中断了Axios请求，所以控制台无输出、数据也无法提交到后端。

2. 请求参数格式不匹配 #

你通过axios.post(..., {iphone})发送请求时，会把数据包装成{iphone: {id: "", name: "", ...}}的嵌套结构，但后端接口的@RequestBody期望直接接收iPhoneItem扁平对象（即{id: "", name: "", ...}），导致后端无法正确解析请求体，最终数据无法存入数据库。

修正后的React组件代码 #

import { useState } from 'react';
import axios from "axios";

export default function CreateiPhone(){
    const [iphone, setiPhone] = useState({
        id: "",
        name: "",
        model: "",
        configuration: "",
        imgUrl: "",
    });
    
    const handleChange = (e) => {
        const value = e.target.value;
        setiPhone({...iphone, [e.target.name]: value });
    };
    
    const handleSubmit = async (e) => {
        // 修正拼写错误，阻止表单默认刷新
        e.preventDefault();

        try {
            // 直接传递iphone对象，而非嵌套包装
            const response = await axios.post("http://localhost:8080/api/createiPhone", iphone);
            console.log(response.status, response.data);
            // 可选：提交成功后重置表单
            setiPhone({
                id: "",
                name: "",
                model: "",
                configuration: "",
                imgUrl: "",
            });
        } catch (error) {
            console.error('Error:', error);
        }
    };

    return (
        <div>
            {/* 简化onSubmit写法，React会自动传递事件对象 */}
            <form onSubmit={handleSubmit}>
                <label htmlFor="Id">ID:</label>
                <input
                    id="Id"
                    type="text"
                    name="id"
                    value={iphone.id}
                    onChange={handleChange}
                />
                <label htmlFor="Name">Name:</label>
                <input
                    id="Name"
                    type="text"
                    name="name"
                    value={iphone.name}
                    onChange={handleChange}
                />
                <label htmlFor="Model">Model:</label>
                <input
                    id="Model"
                    type="text"
                    name="model"
                    value={iphone.model}
                    onChange={handleChange}
                />
                <label htmlFor="Configuration">Configuration:</label>
                <input
                    id="Configuration"
                    type="text"
                    name="configuration"
                    value={iphone.configuration}
                    onChange={handleChange}
                />
                <label htmlFor="ImgUrl">imgUrl:</label>
                <input
                    id="ImgUrl"
                    type="text"
                    name="imgUrl"
                    value={iphone.imgUrl}
                    onChange={handleChange}
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者Corbin Baucom