React中无法编辑API预填充输入框数据的问题求助

你的问题核心是输入框的value绑定状态和更新逻辑不匹配：第二个输入框的value直接绑定了API返回的warehouseData.name，但你的handleChange只更新userInput状态，导致输入框的值永远停留在API返回的初始值，自然无法编辑。

正确实现思路 #

• 不要分开维护warehouseData和userInput两个状态，统一用一个状态管理所有表单数据
• API获取到数据后，直接把数据初始化到这个表单状态中
• 所有输入框的value都绑定到这个统一状态，onChange逻辑统一更新该状态

修改后的代码 #

function WarehousesDetailsEdit() {
    const { id } = useParams();

    // 统一用一个对象状态管理表单数据（仓库数据是对象，初始值设为空对象更合理）
    const [formData, setFormData] = useState({});

    const handleChange = (e) => {
        setFormData((prevData) => ({ 
            ...prevData, 
            [e.target.name]: e.target.value 
        }));
    };

    useEffect(() => {
        axios
            .get(`http://localhost:8080/warehouses/${id}`)
            .then((resp) => {
                const warehouse = resp.data.warehouseDetails[0];
                // 将API返回的数据映射到表单状态，确保字段名和输入框name对应
                setFormData({
                    "Warehouse Name": warehouse.warehouseName, // 这里字段名根据API实际返回调整
                    "Street Address": warehouse.name
                });
            })
            .catch((err) => {
                console.log(err, "Error!");
            });
    }, [id]);

    return (
        <>
            <input
                name="Warehouse Name"
                value={formData["Warehouse Name"] || ""} // 加|| ""避免初始加载时undefined导致输入框异常
                onChange={handleChange}
            />
            
            <input
                name="Street Address"
                value={formData["Street Address"] || ""}
                onChange={handleChange}
            />
        </>
    )
}

关键说明 #

1. 合并状态为formData，避免分散管理导致的状态不同步问题
2. API返回数据后，直接映射到表单字段，确保输入框的name属性和状态的key完全对应
3. 输入框的value添加|| ""处理，避免初始加载状态为空时出现undefined，导致输入框报错
4. 后续提交更新时，直接使用formData中的数据调用axios.put即可

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