0

Me explico, estoy recibiendo un Json con el siguiente fetch:

  function LoadActivity() {
    fetch("https://localhost:7079/cliente/listarClientes")
      .then((response) => response.json())
      .then((data) => setActivity(data.data[0].nombre)); //console.log(data.data[0])
  }

  const [activity, setActivity] = useState([]);
  useEffect(() => {
    LoadActivity();
  }, []);

El json llega asi

introducir la descripción de la imagen aquí

Por lo general, lo normal y lo mas sencillo es que el json directamente traiga el array en si, en vez de que un dato del json contenga el array.

Mi pregunta es, es posible acceder al array que hay en un dato json? Lo intenté de vcarias maneras pero solamente logro traerme uno por uno.

Por ejemplo, para traerme la posicion 0 del Array, tengo que hacer

...
.then((data) =>console.log(data.data[0].nombre))

Y ésto lo hago asi ya que data.data[0] me tira errores

react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {id, nombre, correo}). If you meant to render a collection of children, use an array instead.

Y cuando hago el mapeo en el return

Activity.jsx:17 Uncaught TypeError: activity.map is not a function at Activity

Pero bueno, mi consulta es esa, si hay alguna manera de acceder al array posicion por posicion, y no por dato especifico (nombre, correo, id)

Osea, yo deberia poder hacer un .then((data) => setActivity(data.data)), y luego en el return, pueda hacer un map() de cada uno

Asi..

return (
    <div>
      <h1>{activity}</h1>
      {
        activity?.map((cliente, index) =>        
            <div>
                <h2>{cliente.data[index].nombre}</h2>
                <h2>{cliente.correo[index].correo}</h2>
                <h2>{cliente.id[index].id}</h2>
            </div>
        )
      }
      <button>Cargar Más</button>
    </div>
  );

Version 2:

 return (
    <div>
      <h1>Cliente</h1>
      {
        activity?.length && activity.map((cliente, index) =>        
            <div>
                <h2>{cliente.data[index].nombre}</h2>
                <h2>{cliente.data[index].correo}</h2>
                <h2>{cliente.data[index].id}</h2>
            </div>
        )
      }
      <button>Cargar Más</button>
    </div>
  );

Error que muestra en consola:

react-dom.development.js:18687 The above error occurred in the component: at Activity (http://localhost:3000/static/js/bundle.js:97:82) at App Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

2
  • Esta bien el error, vos estas queriendo hacer un map, que es una funcion iteradora para hacerla sobre arrays. Pero vos no estas guardando el array data en activity sino que estas guardando el primer elemento como un objeto, por eso no podes iterar. Esta bien setear (data.data) en el state. Finalmente, para que el map funcione correctamente, deberias hacer algo como activity?.length && activity.map((cliente... para que se ejecute cuando el array tenga datos
    – Agustin G.
    Commented el 17 ene. 2023 a las 20:06
  • Ahi actualicé con lo que usted me dijo Commented el 18 ene. 2023 a las 11:29

1 respuesta 1

0

Bien, al parecer estaba recibiendo el json como un objeto y no como un array, es por eso que no podia mapearlo. Por lo que tenia que ubicar la respuesta en un array cuando lo guardaba...

  function LoadActivity() {
      fetch("https://localhost:7079/cliente/listarClientes")
      .then((response) => {
        return response.json()
      })
      .then((data) => {
        setActivity([data])
      });

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.