handleSubmit未定义报错及执行时白屏问题求助

报错原因 #

handleSubmit is not defined 是因为你把handleSubmit定义在了内部函数FormData里，组件返回的JSX处于外部作用域，根本访问不到这个函数。再加上代码里的其他错误，直接引发了白屏：

• 函数组件错误使用this：Data是函数组件，不能用this.FormData这类类组件的写法
• 内部函数FormData从未执行：状态fname、lname根本没被初始化
• JSX被转义：代码里的<等转义字符无法被React识别

修正后的代码 #

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

function Data() {
    // 直接在组件顶层定义状态，无需嵌套函数
    const [fname, setFname] = useState('');
    const [lname, setLname] = useState('');

    // 把handleSubmit放在组件顶层，让JSX能访问到
    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const response = await axios.post('/server', {
                fname,
                lname,
            });
            console.log(response.data)
        } catch (error) {
            console.error(error);
        }
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label>
                    First Name:
                    <input type="text" value={fname} onChange={(e) => setFname(e.target.value)} />
                </label>
                <label>
                    Last Name:
                    <input type="text" value={lname} onChange={(e) => setLname(e.target.value)} />
                </label>
                <button type='submit'>Submit</button>
            </form>
        </div>
    )
}

关键修改点 #

• 把状态和handleSubmit直接放在组件函数的顶层，确保作用域正确，JSX能访问到
• 移除错误的this.FormData引用，函数组件直接使用定义的状态变量和setter函数
• 修复JSX的转义字符，把<改成<，"改成"，让React能正常解析标签
• 确保引入useState和axios（如果之前没导入的话）

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