React JS中输入框onchange事件无法更新状态问题求助

核心问题及修复点： #

• 输入框值与更新状态脱节：你把输入框的value绑定到了data.title，但onChange事件更新的是title状态，两者没有关联。输入时输入框始终显示接口返回的原始数据，不会同步用户输入的内容。
• JSX结构语法错误：return语句里存在两个<form>标签，第一个form提前闭合，导致输入框不在表单范围内，既破坏DOM结构，也会导致提交逻辑失效。
• useEffect依赖缺失：获取数据的useEffect没有监听params.id，当路由参数变化时不会重新请求对应的数据。
• 初始状态类型不匹配：data初始值是空字符串，而接口返回的是对象，初始渲染时data.title会是undefined，应将初始状态设为{}。

修正后的代码： #

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";

function BookEdits() {
    const navigate = useNavigate();
    const [data, setData] = useState({});    
    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [author, setAuthor] = useState("");
    
    const params = useParams();    

    const handleSubmit = (event) => {
        event.preventDefault();

        const requestOptions = {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                title: title,
                description: description,
                author: author,
            }),
        };

        fetch(`https://localhost:7174/api/books/${params.id}`, requestOptions).then(
            (response) => {
                console.log(response);
                if (!response.ok) alert("Error saving book details");
                else alert("Book details is saved successfully");
                navigate("/BooksList");
            }
        );
    };   

    useEffect(() => {
        fetch(`https://localhost:7174/api/Books/${params.id}`)
            .then((response) => response.json())
            .then((resData) => {
                setData(resData);
                // 将接口返回的数据同步到对应状态
                setTitle(resData.title);
                setDescription(resData.description);
                setAuthor(resData.author);
            });    
    }, [params.id]); // 添加params.id作为依赖，监听参数变化

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Title:
                <input
                    type="text" 
                    value={title}        
                    onChange={(e) => setTitle(e.target.value)}
                />
            </label>
            <label>
                Description:
                <input
                    type="text" 
                    value={description}        
                    onChange={(e) => setDescription(e.target.value)}
                />
            </label>
            <label>
                Author:
                <input
                    type="text" 
                    value={author}        
                    onChange={(e) => setAuthor(e.target.value)}
                />
            </label>
            <input type="submit" value="Save" />
        </form>
    );
}

export default BookEdits;

额外说明： #

• 获取接口数据后，需要将对应字段同步到各自的状态中，这样输入框才能正确显示初始值并响应输入更新。
• 补充了description和author的状态及输入框，因为提交逻辑中用到了这两个字段，原代码未定义对应状态。

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