React中POST状态未更新：post.title与post.body无法正常更新求助

可能的原因及解决方案： #

1. 自定义组件MyInput未正确绑定状态

你使用了自定义的MyInput组件，首先要确认这个组件内部是否正确将外部传入的value和onChange传递给原生<input>元素。如果MyInput没有正确处理这两个props，输入框内容不会和状态联动，自然无法更新post.title和post.body。

检查MyInput的实现，确保它类似这样：

function MyInput({ value, onChange, ...rest }) {
  return <input value={value} onChange={onChange} {...rest} />;
}

2. 状态更新存在闭包问题

当前你用对象展开的方式更新状态：setPost({ ...post, title: e.target.value })，这种方式在部分场景下会因闭包捕获旧状态导致更新异常。改用函数式更新能确保每次拿到最新状态：

修改后的状态更新代码：

// Title输入框的onChange
onChange={(e) => setPost(prevPost => ({ ...prevPost, title: e.target.value }))}

// Body输入框的onChange
onChange={(e) => setPost(prevPost => ({ ...prevPost, body: e.target.value }))}

修改后的完整代码示例 #

export default function CreatePost() {
    const [post, setPost] = useState({ title: "", body: "" });

    function addNewPost(e) {
        e.preventDefault();
        const newPost = {
            ...post,
            id: Date.now(),
        };
        console.log(newPost);
    }

    return (
        <form>
            <MyInput
                placeholder="Enter title"
                onChange={(e) => setPost(prev => ({ ...prev, title: e.target.value }))}
                value={post.title}
                type="text"
            />
            <MyInput
                placeholder="Enter description"
                value={post.body}
                type="text"
                onChange={(e) => setPost(prev => ({ ...prev, body: e.target.value }))}
            />
            <MyButton onClick={addNewPost}>Create post</MyButton>
        </form>
    );
}

先排查MyInput的实现是否正确，再替换状态更新的方式，基本就能解决状态不更新的问题。

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