javascript: no se puede asignar a través de una matriz creada dinámicamente a través de redux

import "./admin.css";
import { HeaderAdmin } from "./header/header";
import Clients from "./clients/clients";
import { clientsRef } from "../../firebase/firebase";
import { useEffect } from "react";
import { connect } from "react-redux";
import { fetchClients } from "../../redux/clients-admin/clients-admin.actions";

const Admin = ({ fetchClients }) => {
  // const testList = [{ clientEmail: "[email protected]", clientName: "john" }];

  // console.log(testList);

  const clientData = () => {
    const clientsList = [];
    clientsRef.get().then((querySnapshot) => {
      querySnapshot.docs.forEach((doc) => {
        const document = doc.data();
        console.log(document);
        clientsList.push(document);
      });
    });
    console.log(clientsList);
    const clientArray = { clients: clientsList };
    fetchClients(clientArray);
  };
  useEffect(clientData, []);

  return (
    <div>
      <HeaderAdmin />
      <Clients />
    </div>
  );
};
const mapDispatchToProps = (dispatch) => ({
  fetchClients: (clientList) => dispatch(fetchClients(clientList))
});
export default connect(null, mapDispatchToProps)(Admin);

[![ingrese la descripción de la imagen aquí][2]][2]Estoy usando redux para crear una matriz. Pero no funciona en la función de mapa. pero si consuelo.log esa matriz creada y la copio desde la consola, y luego asigno esa matriz copiada a otra constante, funciona. Por qué no funciona dinámicamente. Estoy agregando una imagen de mi consola, El primero es una matriz estática (la que copié y pegué en mi código). El segundo es una matriz creada dinámicamente. ¿Cuál es la diferencia? Si los copio y los pego en el bloc de notas, ambos se ven exactamente iguales, pero [![

import "./clients.css";
import { ClientBar } from "./client-bar";
import { connect } from "react-redux";

const Clients = ({ fetchClients }) => {
  const cs = [
    {
      clientEmail: "[email protected]",
      clientMessage:
        "hello my name is john wickhello my name is john wickhello my name is john wickhello my name is john wick",
      clientSubject: "unknown",
      clientName: "john"
    },
    {
      clientEmail: "[email protected]",
      clientMessage:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorum dolorem soluta quidem expedita aperiam aliquid at. Totam magni ipsum suscipit amet? ",
      clientSubject: "client",
      clientName: "client"
    }
    ///I copied this cs from output of my clintsss array
  ];
  console.log(cs);
  const clintsss = fetchClients.clients;
  console.log(clintsss);
  return (
    <div className="about">
      <div className="box">
        <div className="box-1">
          <h1>Clients</h1>
          <div className="clients-box">
             {clintsss.map((data) => (
              <div>{data.clientName}</div>
            ))} 
          </div>
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  fetchClients: state.fetchClients.clientsList
});

export default connect(mapStateToProps)(Clients);

]3]3La matriz generada dinámicamente no funciona en la función de mapa.

¿Se obtiene la lista de clientes de forma asincrónica?

- roperzh

28 de marzo de 2021 a las 4:33

No, estoy llamando a la acción usando useEffect(), por lo que no pude llamar a async.

- Guntas Singh Sandhu

28 de marzo de 2021 a las 4:37

Funcionó, gracias. Pero lo que marca la diferencia.

- Guntas Singh Sandhu

28 de marzo de 2021 a las 4:59

Gracias roperzh. Cuando eliminé useEffect() en admin.jsx y ahora mi código funciona. pero la función de mapa muestra un valor nulo. Después de hacer algunos cambios en el código (temporalmente), comienza a funcionar.

- Guntas Singh Sandhu

28 de marzo de 2021 a las 6:09

------------------------------------

¡Felicidades! ¡Descubriste exactamente lo que estaba mal! pero yo'Le sugerimos que no utilice setTimeout como método para esperar a que se obtengan los datos. ¿Por qué? una operación asíncrona puede tardar una cantidad de tiempo variable dependiendo de múltiples factores, por ejemplo: ¿qué sucede si un usuario tiene una conexión a Internet lenta y tarda más que el tiempo de espera en recuperar los datos? o, si el usuario tiene una conexión a Internet rápida y obtiene los datos más rápido que su tiempo de espera, le hará esperar más.

Este es un buen artículo sobre cómo obtener datos con ganchos. ¡Te recomiendo que lo leas! En pocas palabras necesitas hacer algo como esto (esto es sólo un ejemplo, necesitarás ajustar el código):

const [clients, setClients] = useState([]);

useEffect(() => {
    async function fetchData() {
      const clients = await functionToFetchClients();
      setClients(result.clientsList);
    }

    fetchData();
  }, []);

1

¡impresionante! ¿Te importaría marcar esta respuesta como aceptada?

- roperzh

31/03/2021 a las 13:40

------------------------------------

Lo descubrí. En realidad, no le estoy dando a mis fetchClients suficiente tiempo para recuperar los datos, solo los usé para renderizarlos inmediatamente. Así que necesitaba encontrar alguna solución para darle tiempo suficiente para recuperarse. Por ahora, solo le di una función de tiempo de espera establecido.

1

Le recomiendo encarecidamente que no utilice setTimeout para esto; consulte mi respuesta para obtener una explicación del porqué + una posible forma de resolver su problema.

- roperzh

28/03/2021 a las 13:14