0

Estoy armando una web en react y soy nuevo, estoy armandolo con firebase con su base de datos firestore, realizo la captura de la información a través de un useEffect y lo dejo separado en tres userState. pero al momento de colocarlo en el return y ocupar un .map me dice que la función map no es una función.

me puede decir que hago mal

Gracias

comparto código

import React, { useState, useEffect} from "react";
import '../App.css';
import { useParams } from "react-router-dom";
import { db } from "../firebase/firebase";
import { doc, collection, getDoc } from "firebase/firestore"


const Order = (() => {
  const { orderID } = useParams();
  const [order, setOrder] = useState({});
  const [persons, setPersons] = useState([]);
  const [items, setItems] = useState([]);

  useEffect(() => {
    const ventasCollection = collection(db, 'ventas');
    const referenceDoc = doc(ventasCollection, orderID);
    getDoc(referenceDoc)
    .then(result => {
        const order = {
          id: result.id,
          ...result.data(),
        }
        setOrder(order);
        setPersons(order.form);
        setItems(order.items);
    }).catch(error => console.err);
  }, [orderID]);

  console.log(order, persons, items);
  return(
      <>
        <div className="container">
          <div className="row">
            <h2>Orden de Envio </h2>
            <div className="col s12 right-align">
              {orderID}
            </div>
            {
              persons.map((person, index) => {
                return(
                  <div className="col s12" key={index}>
                    <h2>person.phone</h2>
                  </div>
                )
              })
            }
          </div>
        </div>
      </>     
  );    
});

export default Order;
7
  • Puedes logear el arreglo persons para ver qué contiene? Commented el 27 jul. 2022 a las 18:24
  • coloco un console.log y me da los datos :{country: 'Chile', email: '[email protected]', nombre: 'Juan Pablo Grover Pinto', zip: '5502899', phone: '+56982657064', …} address: "Jose Manuel Balmaceda 15" city: "Puerto Montt" country: "Chile" email: "[email protected]" nombre: "Juan Pablo Grover Pinto" phone: "+56982657064" state: "Los Lagos" zip: "5502899" Commented el 27 jul. 2022 a las 18:30
  • lo mas raro que coloco un items.map y si me manda los datos Commented el 27 jul. 2022 a las 18:30
  • Pero eso no es un arrray. Es un objeto. Los objetos no tienen la función .map Por eso es el error Commented el 27 jul. 2022 a las 18:32
  • hago un foreach y me sale lo mismo Commented el 27 jul. 2022 a las 18:36

1 respuesta 1

1

Problema

El problema es que estás intentando usar la función map() en un objeto y no en un array.

Esto no es posible debido a que los objetos de javascript no son iterables como lo son los arreglos.

Solución

La solución es usar directamente el objeto en el componente y no iterarlo:

return(
      <>
        <div className="container">
          <div className="row">
            <h2>Orden de Envio </h2>
            <div className="col s12 right-align">
              {orderID}
            </div>

            <div className="col s12">
               <h2>persons.phone</h2> <!-- Usamos la variable persons directamente si tratar de iterarla ya que es un objeto y no un array -->
            </div>

          </div>
        </div>
      </>     
  );    
});

Como comentario, te recomiendo cambiar el nombre de la variable persons a person en singular ya que esto es lo que puede causarte confusión.

Conceptualmente la variable persons no tiene un nombre correcto ya que no contiene muchas personas (una lista) si no que contiene los datos de solo 1 persona.

5
  • Gracias, estoy armandolo asi Commented el 27 jul. 2022 a las 21:21
  • Si la respuesta solucionó tu problema considera marcarla como respuesta aceptada. Saludos! Commented el 27 jul. 2022 a las 22:33
  • Como hago para marcarlo jajajaj soy renuevo Commented el 28 jul. 2022 a las 16:24
  • Te debería salir un simbolo de check a la izquierda de la respuesta. Abajo de donde se vota la respuesta si mal no recuerdo Commented el 28 jul. 2022 a las 17:27
  • 1
    Listo compalero y muchas gracias por tu explicacion Commented el 28 jul. 2022 a las 19:47

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.