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.

¿Cómo puedo reinicializar un hook de React?

23 Jul, 2023 Programación

Tengo una página donde muestro los datos de la API basados en un id. Estoy usando React Query para gestionar el almacenamiento de los datos. Lo que intento hacer es que cuando se cambia el valor del input con el id, me gustaría volver a obtener los datos de un objeto diferente. Intenté hacer lo siguiente:

const useData = (id: string) => useQuery(
  ['data', id],
  () => axios.get(`/api/data/${id}`),
  {
    enabled: !!id,
  },
);

const Page = () => {
  const [id, setID] = useState('1');
  const [result, setResult] = useState(useData(id));

  useEffect(() => {
    setResult(useData(id));
  }, [id]);

  return (
    <div>
      {result.data}
      <input onchange="{(e)" ==""> setID(e.target.value)} />
    </div>
  );
};

Pero no se pueden llamar hooks dentro del callback de useEffect. ¿Cuál sería el enfoque correcto para volver a asignar el valor de result con los datos de una nueva llamada a la API?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución sería utilizar el gancho useQueries proporcionado por React Query en lugar de useQuery. El gancho useQueries le permite ejecutar múltiples consultas en paralelo, por lo que podría crear una nueva consulta para cada id del que desee obtener los datos.

    Aquí hay una implementación de ejemplo utilizando useQueries:

    import { useQueries } from 'react-query';

const Page = () => {
  const [id, setID] = useState('1');
  const queryResults = useQueries([
    {
      queryKey: ['data', id],
      queryFn: () => axios.get(`/api/data/${id}`),
      enabled: !!id,
    },
  ]);

  const result = queryResults[0];

  return (
    <>
      <div>{result.data}</div>
      <input onchange="{(e)" ==""> setID(e.target.value)} />

  );
};

    En este ejemplo, estamos utilizando un array de configuraciones de consulta con un único elemento. La queryKey para esta configuración es un array que contiene la cadena 'data' y el id actual. La queryFn es una función que realiza una solicitud GET al punto final de la API con el id actual como parámetro. El indicador enabled asegura que la consulta solo se ejecute cuando id es verdadero.

    El gancho useQueries devuelve un array de resultados de consulta que corresponden al array de configuraciones de consulta que se pasó. En nuestro caso, solo estamos interesados en el primer (y único) elemento de este array, que corresponde a la consulta que acabamos de definir. Asignamos este resultado de consulta a result y mostramos su propiedad data en la página.

    Por último, actualizamos id de la misma manera que antes, pero no necesitamos actualizar result explícitamente porque useQueries se encarga de eso por nosotros.

Comments are closed.