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 /
  • Usar el hook “useState” en una función de React siempre arroja un error. + Cómo compartir una variable con otro componente.

Usar el hook “useState” en una función de React siempre arroja un error. + Cómo compartir una variable con otro componente.

05 Aug, 2023 Programación

Soy un traductor español que traduce documentos de TI. Traduzca lo siguiente al español. No traduzcas el código y la salida en markdown.

Soy principiante en la programación en JavaScript/TypeScript y estoy a punto de desarrollar mi primera aplicación en React. Para obtener algunos datos del backend (FastAPI), creé la función “GetData” que se ejecuta cada vez que se hace clic en el botón.

Componente 1: Botón
import { GetData } from “./socket”

export default function Button() {
return (

)
}

Componente 2 (llamado socket): websocket y lógica de datos

import {useState, createContext} from ‘react’;

let socket: any;

export async function ConnectWebsocket() {
socket = new WebSocket(“ws://127.0.0.1:8000/”);

socket.onopen = () => {
    console.log('conectado')
}

socket.onclose = () => {
    console.log('cerrado')
}

socket.onerror = () => {
    console.log('error')
}

}

export async function GetData() {
const [data, setData] = useState({});

socket.send("Obtener datos");

socket.onmessage = (event: any) => {
    const newData = JSON.parse(event.data);
    console.log(`Datos del servidor: ${newData}`);
    setData((data) => ({ ...data, ...newData }));
}

console.log(`Datos generales: ${data}`);

}

El problema al que me enfrento es el hook useState. Cada vez que intento transmitir los datos a través del websocket haciendo clic en el botón de ejecución, siempre obtengo el siguiente error:

Error en tiempo de ejecución no capturado: Error: Llamada de hook no válida. Los hooks solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
1. Es posible que tenga versiones incompatibles de React y el renderizador (como React DOM).
2. Es posible que esté rompiendo las reglas de los hooks.
3. Es posible que tenga más de una copia de React en la misma aplicación.
Consulte https://reactjs.org/link/invalid-hook-call para obtener consejos sobre cómo solucionar y depurar este problema.

También creé un pequeño ejemplo utilizando el hook useState y este funcionó. ¿Puedes ver en qué me equivoqué en mi código anterior?

Además, tengo otra pregunta de principiantes. ¿Cómo harías que la variable “data” esté disponible para un tercer componente (por ejemplo, una tabla)?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código anterior es que la función GetData no es un componente funcional, pero está llamando al hook useState. Los hooks solo se pueden llamar dentro de componentes funcionales. Para poder usar el hook useState en la función GetData, podrías refactorizarla para que sea un componente funcional y usar el hook useEffect para establecer la conexión del websocket y actualizar el estado de los datos cuando se recibe un mensaje.

    Para poder hacer que la variable data esté disponible para un tercer componente, podrías usar el hook createContext para crear un contexto de datos y proporcionar el valor de la variable data a este contexto. Luego, cualquier componente que necesite acceder a los datos puede consumir el contexto usando el hook useContext.

    Aquí tienes un ejemplo de cómo podrías implementar el contexto de datos:

    // En un nuevo archivo, crea un contexto para los datos
import { createContext } from 'react';

export const DataContext = createContext(null);

// En el componente donde se actualizan los datos (componente del socket), envuelve el estado de los datos con el proveedor del contexto de datos
import { useState, createContext } from 'react';

export function SocketComponent() {
  const [data, setData] = useState({});

  let socket;

  const connectWebsocket = () => {
    socket = new WebSocket('ws://127.0.0.1:8000/');

    socket.onopen = () => {
      console.log('Conectado');
    };

    socket.onclose = () => {
      console.log('Cerrado');
    };

    socket.onerror = () => {
      console.log('Error');
    };

    // Actualiza el estado de los datos cuando se recibe un mensaje
    socket.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      console.log(`Datos del servidor: ${newData}`);
      setData({ ...data, ...newData });
    };
  }

  connectWebsocket();

  return (
    <datacontext.provider value="{data}">
      {/* Renderiza tu componente del socket aquí */}
    </datacontext.provider>
  );
}

// En el componente que necesita acceder a los datos (componente de la tabla), consume el contexto de datos usando el hook useContext
import { useContext } from 'react';
import { DataContext } from './dataContext';

export function TableComponent() {
  const data = useContext(DataContext);

  // Usa la variable data para renderizar tu tabla
}

Comments are closed.