我一直在使用Firestore数据库开发React/Redux应用程序
在我的应用程序中，当用户在输入字段中发送消息时，我会发送简单的 POST请求，用户输入的数据应该在同一页面中呈现，而不需要刷新但即使在我的useEffect中没有deps，我仍然需要刷新！

以下是我的代码：

*过帐组件

{posts.length > 0 &&         
          [...posts].map(({ id, data: { message, name, job, avatarUrl } }) => (
            <Post
              key={id}
              name={name}
              job={job}
              message={message}
              avatarUrl={avatarUrl}
            />
          ))}

但是，在刷新后，我也遇到了一个奇怪的行为，即组件被渲染两次！虽然我的数据库只包含每个消息的一个唯一数据，但react应用程序将其渲染两次（数据库中的querySnapshot被添加到state arrayposts两次

*使用效果

useEffect(() => {
    querySnapshot();
     });
  }, []);

*数据库查询：

const q = query(
    collection(db, "posts"),
    where("type", "==", "post"),
    orderBy("postDate", "desc")
  );

*正在检索数据：

const [input, setInput] = useState("");
  const [posts, setPosts] = useState([]);
  const [nextId, setNextId] = useState("0");
  const addPost = (e) => {
    e.preventDefault();

    const docData = {
      name: "mo",
      job: "zoo",
      message: input,
      avatarUrl: "https://",
      postDate: firebase.firestore.FieldValue.serverTimestamp(),
      type: "post",
    };

    setDoc(doc(db, "posts", nextId.toString()), docData);
    setNextId(parseInt(nextId) + 1);
    setInput("");
  };

  async function querySnapshot() {
    const querySnapshot = await getDocs(q);
    console.log(querySnapshot.docs[0].data().message);
    setNextId(querySnapshot.docs.length)
    querySnapshot.docs.forEach((doc) => {
      let data = {
        id: doc.id,
        data: doc.data(),
      };
      if (data && !posts.includes(data.id)) {
        setPosts((current) => [...current, data]);
        console.log("psts now", posts);
      }
    });
  }

我尝试通过创建useState(new Set())来使用JavaScript Set，但出现了相同的问题，即重复元素
我还尝试将useEffect的deps更改为在posts状态数组更改时呈现，但直到我刷新时仍不呈现