问React组件不会呈现，除非我刷新&重复呈现
EN

Stack Overflow用户

提问于 2022-11-20 11:35:14

回答 1查看 30关注 0票数 1

我一直在开发React/Redux应用程序和防火墙数据库

在我的应用程序中，当用户在输入字段中发送消息时发送简单的POST请求，并且用户输入的数据应该在相同的页面中呈现，而不需要刷新，但是我仍然需要刷新，即使我的useEffect中没有do！

，这是我的代码:

Post component

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

但是，在刷新之后，我还会遇到一种奇怪的行为，即组件被呈现两次！尽管我的数据库只包含一个唯一的数据，每个messageThe react应用程序都会将其呈现两次(从数据库中的querySnapshot被添加到状态数组两次)。

useEffect

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

Database查询：

const q=查询(集合(db，"post")，其中(“type”、"==“、”post“)、orderBy("postDate”、"desc")、

Retrieving the data :

  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);
      }
    });
  }

我尝试通过创建JavaScript来使用useState(new Set())集，但是重复的元素也出现了同样的问题。

我还试图在posts状态数组更改时更改useEffect的dep以呈现，直到我刷新时才呈现。

react-hooks

react-component

reactjs

firebase

firebase-realtime-database

云点播特惠1元起

提供三端 SDK 、云 API、控制台等多种上传方式，弱网环境下文件上传成功率达到 99.5%

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-20 12:02:32

复制原因将由setPosts()引起，我已经按下面的方式更新了代码，尽量避免在循环中设置值。

  async function querySnapshot() {
    const querySnapshot = await getDocs(q);
    setNextId(querySnapshot.docs.length)
    const data = querySnapshot.docs.map((doc)=>{
      return {id:doc.id, data: doc.data()}
    })

    setPosts((current) => [...current, data])
  }