TypeError: сообщения не повторяются, возвращая данные из firebase

Question

Я новичок, использую реагирование и огонь. Я пытаюсь получить сообщения из firebase:

useEffect(() => {
    setLoading(true);
    setError(false);
    let cancel;

    // get posts
    var postsRef = firebase.database().ref('/posts/');
    postsRef.on('value', function(snapshot) {
        setPosts(prevPosts => {     
            var posts = snapshot.val();
            console.log(posts);

            return [...prevPosts,...posts]      
        });
    });

    setLoading(false);

}, [ pageNumber ]);

Проблема в том, что она дает мне:

Ошибка типа: сообщения не повторяются на return [...prevPosts,...posts]

есть идеи как это решить? это вернет данные в функцию, которая будет анализировать данные следующим образом:

return (
    <>
      {posts.map((post, index) => {

        return <Post key={post.id} id={post.id} ref={ref} img={post.img} titulo={post.titulo} />

      })}
    </>
  )

Почему я получаю эту ошибку? как я могу правильно проанализировать мои данные? спасибо!

Answer 1

Поскольку ваша переменная post является объектом, подобным:

{
    "-M5GmoelPzWryNizVjww": { img: "img/", titulo: "title 1", user: "root" },
    "-M5GmsTDcbDYZuoYBVIt": { img: "img/", titulo: "title 2", user: "root" },
    "-M5GmxMZMzZe9p5uDuWe": { img: "img/", titulo: "title 3", user: "root" },
    "-M5GmyKDbbtxR8Dw3-J2": { img: "img/", titulo: "title 4", user: "root" },
    "-M5GmzHjK1PQJ2ulrCTi": { img: "img/", titulo: "title 5", user: "root" },
    "-M5Gn2Rsv_OrwL1GkbVG": { img: "img/", titulo: "title 6", user: "user" },
    "-M5Gn39y9JDishOdxwi4": { img: "img/", titulo: "title 7", user: "user" }
}

Вы должны предварительно преобразовать его в массив, чтобы вы могли объединить его с вашим предыдущим списком сообщений. Для этого и используя ключ объекта в качестве идентификатора, можно использовать:

return [...prevPosts, ...Object.keys(posts).map(key => ({
    id: key,
    ...posts[key]
}))];