使用React与Material UI时useState编译失败提示未定义

问题核心原因 #

你的代码存在两个致命错误：

• 作用域错误：useState钩子被嵌套在submitClick函数内部，导致组件的JSX模板和submitClick内提前引用变量的代码都无法访问这些状态。React状态钩子必须定义在组件函数的顶层作用域，不能放在内部函数里。
• 变量提前引用：在submitClick中，你先创建blog对象引用title等变量，之后才定义对应state，这直接触发了变量未定义的报错。

修正后的完整代码 #

import * as React from 'react';
import { useState } from 'react';
import { TextField, Typography, Button, FormControl, FormControlLabel, Radio } from "@mui/material";
import { Container } from "@mui/system";

const PostForm = () => {
    // 将state定义在组件顶层，确保全组件可访问
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
    const [category, setCategory] = useState('');
    const [imageUrl, setImageUrl] = useState(''); // 新增图片URL的状态管理

    const submitClick = (e) => {
        e.preventDefault();
        const blog = { title, content, category, imageUrl };

        fetch('http://localhost:8000/posts/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(blog)
        })
        .then(() => {
            console.log('post added successfully');
            // 提交后重置表单状态
            setTitle('');
            setContent('');
            setCategory('');
            setImageUrl('');
        })
    }

    return(
        <Container maxWidth="lg">
            <Typography variant="h5">Create a post</Typography>
            <form onSubmit={submitClick}>
                <TextField 
                    label="Post title" 
                    variant="outlined" 
                    value={title} 
                    onChange={(e) => setTitle(e.target.value)} 
                    fullWidth 
                    required 
                    margin="normal"
                />
                <TextField 
                    label="Post content" 
                    variant="outlined" 
                    multiline 
                    minRows={5} 
                    value={content} 
                    onChange={(e) => setContent(e.target.value)} 
                    fullWidth 
                    required 
                    margin="normal"
                />
                <TextField 
                    label="Image URL" 
                    variant="outlined" 
                    value={imageUrl}
                    onChange={(e) => setImageUrl(e.target.value)}
                    sx={{ width: "100%" }} 
                    required 
                    margin="normal"
                />
                <Typography variant="h6" sx={{ margin: '1rem 0' }}>Category</Typography>
                <FormControl>
                    <FormControlLabel 
                        control={<Radio checked={category === 'News'} onChange={() => setCategory('News')} />} 
                        label="News" 
                    />
                    <FormControlLabel 
                        control={<Radio checked={category === 'Sports'} onChange={() => setCategory('Sports')} />} 
                        label="Sports" 
                    />
                    <FormControlLabel 
                        control={<Radio checked={category === 'Finance'} onChange={() => setCategory('Finance')} />} 
                        label="Finance" 
                    />
                </FormControl>
                <Button 
                    type="submit" 
                    variant="contained" 
                    sx={{ display: "block", marginTop: '1rem' }}
                >Submit</Button>
            </form>
        </Container>
    );
}

export default PostForm;

额外优化点 #

• 给图片URL输入框绑定了状态与变更事件，确保提交时能获取该字段
• 为单选按钮添加了选中状态判断和变更事件，实现分类状态的正确更新
• 增加margin属性优化表单布局
• 提交成功后自动重置所有表单状态

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