ReactJS中提交评论后如何重新渲染Comment组件？

你的核心问题是：更新Firestore的评论后，Context中存储的postDetail没有同步最新数据，导致Comment组件无法获取新评论并渲染。下面提供两种可行的解决方案：

方案一：手动同步Context状态 #

在添加评论到Firestore后，直接更新Context中的postDetail状态，确保组件能拿到最新数据：

1. 确保你的Context提供了更新postDetail的方法（比如setPostDetail）
2. 修改CreateComment组件的提交函数：

const { postDetail, setPostDetail } = useContext(AppContext);

const createComment = async (author, authorId, comment) => {
  const docRef = doc(db, "posts", id);
  const newComment = { author, authorId, comment };
  
  // 更新Firestore数据库
  await updateDoc(docRef, {
    comments: arrayUnion(newComment),
  });
  
  // 不可变更新Context中的postDetail状态
  setPostDetail(prevState => ({
    ...prevState,
    comments: [...prevState.comments, newComment]
  }));
};

更新后，Comment组件依赖的postDetail发生变化，会自动重新渲染并显示新评论。

方案二：使用Firestore实时监听（更可靠） #

通过Firestore的onSnapshot监听帖子文档的变化，自动同步到Context状态，不管是哪里修改数据都能实时更新：

在你的Context Provider组件中添加监听逻辑：

import { doc, onSnapshot } from "firebase/firestore";
import { db } from "./firebaseConfig"; // 你的Firebase配置文件

const AppContextProvider = ({ children }) => {
  const [postDetail, setPostDetail] = useState(null);
  const currentPostId = "当前帖子ID"; // 从路由/参数中获取实际帖子ID

  useEffect(() => {
    if (!currentPostId) return;

    // 监听帖子文档的实时变化
    const unsubscribe = onSnapshot(doc(db, "posts", currentPostId), (snapshot) => {
      if (snapshot.exists()) {
        setPostDetail(snapshot.data());
      }
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
  }, [currentPostId]);

  return (
    <AppContext.Provider value={{ postDetail, setPostDetail }}>
      {children}
    </AppContext.Provider>
  );
};

这种方式下，当你通过CreateComment更新评论后，Firestore会自动触发快照更新，Context的postDetail会同步最新数据，Comment组件自然会渲染新评论。

为什么之前的useEffect监听没生效？ #

大概率是因为你更新postDetail时没有遵循不可变更新原则：比如直接修改postDetail.comments数组（如postDetail.comments.push(newComment)），然后调用setPostDetail(postDetail)。这种情况下，postDetail的引用没有变化，React无法检测到状态更新，所以useEffect不会触发，组件也不会重渲染。必须通过创建新对象/数组的方式更新状态（如方案一中的[...prevState.comments, newComment]）。

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