0

Estoy realizando un sito web donde un usuario autenticado pueda crear artículos, guardarlos en una base de datos, y que luego de esto el nuevo artículo se muestre.

const INITIAL_STATE = {
   editing: false,
   title: "",
   date: "",
   topic: "",
   article: "",
   error: null,
   mainTopics,
};

class HomePage extends Component {
   constructor(props) {
      super(props);

      this.state = { ...INITIAL_STATE, myPosts: [] };

      this.handleClick = this.handleClick.bind(this);
      this.handleDatabaseUpdate = this.handleDatabaseUpdate.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.updateFromDatabase = this.updateFromDatabase.bind(this);

      this.updateFromDatabase();
   }

El método updateFromDatabase lo llamo para que antes de que el componente se renderice se carguen las publicaciones (objetos) del usuario actual:

updateFromDatabase() {
      const userUID = this.props.firebase.auth.currentUser.uid;
      this.props.firebase.userPosts(userUID).on("value", snapshot => {
         const postsObject = snapshot.val();

         const postsList = Object.keys(postsObject).map(key => {
            return {
               ...postsObject[key],
               id: key,
            };
         });

         this.state.myPosts = postsList;
      });
   }

El método del singleton de la base de datos Firebase que se llama en la línea 2 es:

userPosts = uid => this.db.ref(`users/${uid}/publications/1`);

Y el formato de las publicaciones es:

introducir la descripción de la imagen aquí

El método render es el siguiente:

render() {
      const {
         //...Otros atributos que se emplean en el formulario
         myPosts,
      } = this.state;

      return (
         <div>
            <h1>HomePage</h1>
            <p>The Home Page is accessible by every signed in user.</p>

            {this.state.editing ? (
               ...Código para crear un formulario para guardar la nueva publicación) : (
               <div>
                  <button onClick={this.handleClick}>New post</button>
                  {myPosts && <PostContainer posts={myPosts} />}
               </div>
            )}
         </div>
      );
   }
}

El código del componente <PostContainer /> es el siguiente:

class PostContainer extends Component {
   constructor(props) {
      super(props);

      this.state = {
         loading: false,
         postsStack: new Stack(),
      };

      this.loadObjectsIntoStack = this.loadObjectsIntoStack.bind(this);
      this.getPostsArray = this.getPostsArray.bind(this);

      this.loadObjectsIntoStack();
   }

   loadObjectsIntoStack() {
      const posts = this.props.posts;
      posts.forEach(key => {
         this.state.postsStack.push({
            id: posts[key].id,
            title: posts[key].title,
            date: posts[key].date,
            topic: posts[key].topic,
            article: posts[key].article,
         });
      });
   }

   getPostsArray() {
      const postsList = [];
      const postsStack = this.state.postsStack;
      while (!postsStack.isEmpty()) {
         postsList.push(postsStack.pop());
      }

      return postsList;
   }

   render() {
      const postArray = this.getPostsArray();
      return (
         <div>
            {this.state.loading && <p>Loading ...</p>}
            {postArray.map(post => (
               <Post key={post.id} post={post} />
            ))}
         </div>
      );
   }
}

Sin embargo, cuando hago debug, el arreglo "myPosts" que en teoría debería contener las publicaciones para el momento en el que se renderice, y que se pasa como props de <PostContainer />, se pasa vacío, por lo que al intentar obtener los atributos de cada objeto obtengo un error.

La idea es que debajo del botón de crear publicación se carguen todas las publicaciones que ha creado el usuario hasta el momento, siendo las más recientes las primeras en mostrarse, es por esto que uso una pila en <PostContainer /> para organizar los datos. El código del formulario para añadir una nueva publicación y sus correspondientes manejadores de eventos no lo incluyo porque considero que siempre y cuando funcione la obtención de las publicaciones en el arreglo "myPosts", este código no afectaría el funcionamiento del componente.

2 respuestas 2

1

En el método updateFromDatabaseestás intentando mutar el state directamente y no se puede.

Prueba así:

updateFromDatabase() {
      const userUID = this.props.firebase.auth.currentUser.uid;
      this.props.firebase.userPosts(userUID).on("value", snapshot => {
         const postsObject = snapshot.val();

         const postsList = Object.keys(postsObject).map(key => {
            return {
               ...postsObject[key],
               id: key,
            };
         });

         this.setState({myPosts: postsList});
      });
   } 
3
  • Acabo de resolverlo, entre eso estaba hacer lo que me decías. Gracias
    – jonat lop
    Commented el 15 may. 2020 a las 21:58
  • ¡A ti! En tu respuesta veo que estás haciendo push directamente a un array del state. Fíjate que no podemos mutar el state directamente. En los class components se hace con setState. Mira aquí como añadir elementos al array postsStack de tu state. Commented el 15 may. 2020 a las 23:21
  • Tienes razón, tenía curiosidad de por qué no se añadía dos veces la nueva publicación, puesto que en teoría la añado desde el método "componentWillUpdate" y desde el push que me señalas. Removeré dicha linea y ¡muchas gracias por la aclaración!
    – jonat lop
    Commented el 15 may. 2020 a las 23:42
0

Para resolverlo tuve que añadir métodos del ciclo de vida para manejar bien las actualizaciones de los estados y las re-renderizaciones. El problema principal estaba en PostContainer, más específicamente en el método "loadObjectsIntoStack", puesto que estaba tomando cada key del .forEach() como si fuera la clave alfanumérica de cada elemento del arreglo, más este key representa cada objeto en sí (puesto que en HomePage lo que hice fue tomar cada clave y en vez de hacer que cada objeto fuera accedido por la misma, hice de esta un atributo del objeto), por lo que el código en dicha parte sería:

const posts = this.props.posts;
      posts.forEach(post => {
         this.state.postsStack.push({
            id: post.id,
            title: post.title,
            date: post.date,
            topic: post.topic,
            article: post.article,
         });
      });

Donde "id" es la clave que me identifica la publicación en la base de datos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.