React状态提升问题：setPostList无法更新postList数组求助

问题根源 #

• 异步更新导致取值错误：setPost是异步操作，调用后立刻访问post拿到的还是更新前的旧值，此时把旧值加入postList自然无效。且你根本不需要单独维护post状态，直接用当前的author和body创建新帖子对象即可。
• 冗余状态混淆逻辑：Modal组件内部定义了author和body状态，但实际渲染用的是父组件传过来的props值，本地状态完全没用，反而容易造成逻辑混乱。
• 回调参数传递缺失：Modal中点击Publish时，onClick={props.addAnnouncement}没有传递参数，导致handleAddingAnnouncement里的author和body为undefined。

修复后的代码 #

Modal组件（移除冗余本地状态）

import { useState } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
 
const Modal = (props) => {
  // 移除无用的本地author/body状态，直接使用props传递的值
  return (
    <>
      <AlertDialog>
        <AlertDialogTrigger
          style={{
            border: "1px solid black",
            padding: "10px 40px",
            borderRadius: "4px",
          }}
        >
          Create An Announcement
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Publish A New Announcement:</AlertDialogTitle>
 
            <input
              type="text"
              placeholder="Your Name"
              onChange={props.changeMessageAuthor}
              value={props.author} // 添加value绑定，确保输入框与父状态同步
            />
            <textarea
              type="text"
              rows={5}
              placeholder="Type your announcement here ..."
              onChange={props.changeMessageBody}
              value={props.body} // 添加value绑定，确保输入框与父状态同步
            />
 
            <AlertDialogDescription>
              <span className="text-emerald-600 text-xl font-black">
                Review Your Announcement:
              </span>
              <br />
              <span className="font-black">
                Author:
                <br />
                {props.author}
              </span>
              <br />
              <span className="font-black">Announcement:</span>
              <br /> {props.body}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={() => props.addAnnouncement()}>
              Publish
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
};
 
export default Modal;

PostList组件（修复状态更新逻辑）

import { useState } from "react";
import Modal from "./Modal";
 
const PostList = () => {
  const [body, setBody] = useState("");
  const [author, setAuthor] = useState("");
  const [postList, setPostList] = useState([]);
  // 移除冗余的post状态
 
  const handleMessageBody = (event) => {
    setBody(event.target.value);
  };
 
  const handleMessageAuthor = (event) => {
    setAuthor(event.target.value);
  };
 
  const handleAddingAnnouncement = () => {
    // 直接用当前的author和body创建新帖子
    const newPost = { author, body };
    // 函数式更新确保拿到最新的postList状态
    setPostList(prevList => [...prevList, newPost]);
    // 可选：清空输入框
    setAuthor("");
    setBody("");
  };
 
  return (
    <>
      <hr />
      <br />
      <Modal
        author={author}
        body={body}
        changeMessageAuthor={handleMessageAuthor}
        changeMessageBody={handleMessageBody}
        addAnnouncement={handleAddingAnnouncement}
      />
      <br />
      {postList.length > 0 ? (
        postList.map((post, index) => (
          <div key={index} className="post-item">
            <h3>作者：{post.author}</h3>
            <p>{post.body}</p>
            <hr />
          </div>
        ))
      ) : (
        <h1>暂无公告</h1>
      )}
    </>
  );
};
 
export default PostList;

关键修改说明 #

1. 移除冗余状态：删除Modal内的本地author/body状态、PostList内的post状态，减少状态维护复杂度。
2. 绑定输入框value：给Modal的输入框添加value绑定，确保输入框值与父组件状态双向同步，避免受控组件失控。
3. 函数式更新数组：使用setPostList(prevList => [...prevList, newPost])，确保每次更新都基于最新的数组状态，规避异步更新导致的旧值覆盖问题。
4. 简化回调逻辑：直接用当前的author和body创建新帖子，无需依赖中间状态post。

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