React函数组件PUT请求更新指定ID数据属性失败如何解决

这不是语法错误，核心是状态管理逻辑冲突：
组件内同时定义了两套完全独立、无任何同步逻辑的状态：

• 对象类型的state，初始值为全空字段的对象，全程没有被更新过
• name/email/address/rating四个独立的字符串状态，所有输入框修改、接口详情回填都只操作这四个状态

PUT请求提交时序列化传参用的是始终保持初始空值的state对象，后端收到的所有字段都是空字符串，自然更新后对应ID的所有属性都会变成空白。

推荐直接删除冗余的独立状态，统一用单对象管理表单字段，代码更简洁也不容易出同步问题，修正后的完整代码如下：

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

const RestaurantUpdate = () => {
    // 统一用单个对象状态管理所有表单字段，删除冗余的独立状态
    const [formData, setFormData] = useState({ name: '', email: '', address: '', rating: '' })
    const { id } = useParams();

    useEffect(() => {
        fetch(`http://localhost:3000/restaurant/${id}`)
            .then((response) => response.json())
            .then((result) => {
                // 详情数据直接赋值给统一的表单状态
                setFormData({
                    name: result.name,
                    email: result.email,
                    address: result.address,
                    rating: result.rating
                })
            })
    }, [id]); // 依赖项加上id，避免id变化时不重新拉取对应数据

    // 统一的输入变更处理函数，不用给每个字段写单独的onChange逻辑
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }))
    }

    function update() {
        fetch(`http://localhost:3000/restaurant/${id}`,
            {
                method: "PUT",
                headers: {
                    'Content-Type': 'application/json'
                },
                // 直接传最新的表单状态
                body: JSON.stringify(formData)
            }).then(async (result) => {
                await result.json()
                alert("Restaurant has been updated");
            })
    }
    return (
        <div>
            <h1>Update</h1>
            <div>
                {/* 给每个input加name属性和字段名对应，绑定统一的change事件 */}
                <input 
                    name="name"
                    onChange={handleInputChange}
                    placeholder="Restaurant Name" 
                    value={formData.name} 
                /> <br /><br />
                <input 
                    name="email"
                    onChange={handleInputChange}
                    placeholder="Restaurant Email" 
                    value={formData.email} 
                /> <br /><br />
                <input 
                    name="rating"
                    onChange={handleInputChange}
                    placeholder="Restaurant Rating" 
                    value={formData.rating} 
                /> <br /><br />
                <input 
                    name="address"
                    onChange={handleInputChange}
                    placeholder="Restaurant Address" 
                    value={formData.address} 
                /> <br /><br />
                <button onClick={update}>Update Restaurant</button>
            </div>
        </div>
    );
};

export default RestaurantUpdate;

• useEffect的依赖数组要加上id，如果组件复用时路由id变化，会自动重新拉取对应餐厅的详情
• 如果你一定要保留四个独立的状态定义，那PUT请求的body就不能传未更新的state，要手动拼接成对象：JSON.stringify({name, email, address, rating})，但这种写法冗余度高，字段多的时候维护成本很高，不推荐使用。

内容的提问来源于stack exchange，提问作者Anish Kumar Mohanty