React State Hooks状态不更新问题求助：博客标题无法修改

问题分析 #

你的代码存在几个关键问题，导致State无法正常更新并触发受控组件转非受控的错误：

• State类型不统一：初始blogName是字符串，但handleChange里用对象语法更新，类型混乱引发渲染异常。
• 事件处理绑定错误：onChange={e => handleChange未传递事件对象，handleChange无法获取输入值，自然无法更新State。
• 表单提交未阻止默认行为：点击Save按钮会触发表单默认提交，页面刷新后State被重置。
• 异步数据处理不严谨：若axios请求返回的res.data[0].blog_name为undefined，会直接将blogName设为undefined，触发受控转非受控错误。

修正后的代码 #

function BlogDetail() {
    // 保持State为字符串类型，初始值为空字符串
    const [blogName, setBlogName] = useState("");

    // 用useEffect包裹异步请求，避免组件重复渲染时多次调用API
    useEffect(() => {
        axios.get("/api/blog_detail/70/")
            .then(res => {
                // 确保数据存在再赋值，避免undefined
                const fetchedName = res.data?.[0]?.blog_name || "";
                setBlogName(fetchedName);
            })
            .catch(err => {
                console.error("获取博客数据失败：", err);
            });
    }, []); // 空依赖数组确保只在组件挂载时执行一次

    const handleChange = (e) => {
        // 直接更新字符串类型的State
        setBlogName(e.target.value);
    };

    const saveBlog = (e) => {
        // 阻止表单默认提交行为，避免页面刷新
        e.preventDefault();
        // 发送到API
        console.log(blogName);
    };

    return (
        <div>
            <form onSubmit={saveBlog}> {/* 把提交事件绑定到form的onSubmit更规范 */}
                {blogName}
                {/* 确保input的value始终是字符串，和State类型一致 */}
                <input 
                    type="text" 
                    name="blogName" 
                    value={blogName} 
                    onChange={handleChange} 
                />
                <button type="submit">Save</button>
            </form>
        </div>
    );
}

关键修正说明 #

• 统一State类型：始终让blogName保持字符串类型，避免类型切换导致受控组件错误。
• 正确绑定事件：onChange={handleChange}直接传递事件处理函数，确保事件对象正常传递。
• 用useEffect管理异步请求：避免组件重复渲染时重复调用API，同时处理数据可能为undefined的情况，设置默认空字符串。
• 阻止表单默认行为：在saveBlog中调用e.preventDefault()，防止页面刷新丢失State。
• 安全访问异步数据：用可选链操作符?.和默认值|| ""，避免接口返回数据异常导致blogName变为undefined。

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