después de agregar este código, obtuve una página en blanco, no se carga nada. Supongo que hay algo mal en componentWillReceiveProps pero no sé exactamente qué.
También tengo "Error de tipo no detectado: this.state.postLists.map no es una función" en la consola
import React, { Component } from 'react'; import { getDocs, collection, deleteDoc, doc } from "firebase/firestore"; import { auth, db } from '../firebaseconf'; class Home extends Component { constructor(props) { super(props); this.state = { postLists: '' } } setPostList = (newValue) => { this.setState({ postLists: newValue }); } postsCollectionRef = collection(db, "posts"); componentWillReceiveProps = (nextProps) => { if (nextProps.position !== this.props.position) { const getPosts = async () => { const data = await getDocs(this.postsCollectionRef); this.setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))); }; getPosts(); } } deletePost = async (id) => { const postDoc = doc(db, "posts", id); await deleteDoc(postDoc); }; render() { return ( <div className="homePage"> {this.state.postLists.map((post) => { return ( <div className="post"> {post.title} </div> ); })} </div> ); } } export default Home;Establecer el valor inicial de postLists en estado como matriz
this.state = { postLists: [] }Y tal vez también sea una buena idea agregar algún operador ternario si no hay datos como:
{this.state.postLists.length ? this.state.postLists.map((post) => { return ( <div className="post"> {post.title} </div> ); }) : 'No data'} También piense en reemplazar el componentWillReceiveProps con el componentDidUpdate porque ahora debe usarse el componentDidUpdate en lugar del componentWillReceiveProps
De los documentos de React: https://reactjs.org/docs/react-component.html
La causa raíz de su problema está aquí:
this.state = { postLists: '' }Está definiendo postLists como una cadena y utilizando el método array .map() que está causando el error.