es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Reactjs sobrescribe el componente cuando intento crear un componente por cada elemento en mi lista.

Reactjs sobrescribe el componente cuando intento crear un componente por cada elemento en mi lista.

17 Jun, 2023 Programación

Tengo una matriz de datos que se asemeja a lo siguiente:

data = [{name: 'A', data: 1}, {name: 'B', data: 2}]

También tengo un código que se parece al siguiente:

function ReportComponent({ data }) {
  return data.map((datum) => (
    <typography>
      {datum.name}: {datum.data}
    </typography>
  ));
}

que se llama en

function ReportBox({ component }) {
  const { data } = useFetchHook(component.urls)
  // data devuelve exactamente lo esperado, una matriz de objetos
  return (
    <box>
      <typography>
        {component.title}
      </typography>
      {data !== null && <reportcomponent data="{data}"></reportcomponent>}
    </box>
  );
}

Mi problema es que cuando ejecuto la aplicación, solo obtengo una salida de mis datos (cuando console.log (data) devuelve los datos que mostré arriba), ya sea A: 1 O B: 2. Espero que ambos estén presentes en el componente. ¿Alguna sugerencia?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema parece estar relacionado con el uso del useFetchHook y cómo está devolviendo los datos. Se recomienda utilizar Promise.all para obtener todos los datos a la vez, ya que la implementación actual sobrescribe los datos según se obtienen, lo que resulta en que solo haya un valor presente en el componente. Aquí hay una implementación actualizada del useFetchHook:

    import { useState, useEffect, useRef } from 'react';

const sameContents = (array1, array2) =>
  array1.length === array2.length && array1.every((value, index) => value === array2[index]);

function useFetchHook(urls) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const urlsRef = useRef(null);

  if (!urlsRef.current || !sameContents(urlsRef.current, urls)) {
    urlsRef.current = urls.slice();
  }

  useEffect(() => {
    const results = [];
    if (!urlsRef.current) {
      return;
    }
    const controller = new AbortController();
    const { signal } = controller;

    Promise.all(
      urlsRef.current.map((url) => {
        fetch(url, { signal, mode: 'cors' })
          .then((res) => {
            if (!res.ok) {
              console.log('http issue');
            }
            return res.json();
          })
          .then((data) => {
            if (!signal.aborted) {
              results.push(data);
              setData(results);
              setError(null);
            }
          })
          .catch((error) => {
            if (signal.aborted) {
              return;
            }
            setData(null);
            setError(error);
          });
        return () => {
          controller.abort();
        };
      })
    );
  }, [urlsRef.current]);
  return { data, error };
}

    Puede reemplazar el useFetchHook existente con esta implementación y debería obtener todos los datos y pasarlos correctamente al componente.

Comments are closed.