Reacciona. ¿Por qué no puedo insertar un componente de una biblioteca de terceros?

Tengo la última versión reactr [email protected] y utilizar la biblioteca de react-jugador, importar el reproductor, insertarlo en el diseño y obtener errores:

--- Llamada de gancho inválida. Los hooks sólo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder para uno de los siguientes razones:

Puede tener versiones desajustadoras de React y el renderizador (como Reactar DOM) Podrías estar rompiendo las reglas de los hooks. más de una copia de React in the same app --- - VM30105 reaccion-dom.development.js:20085 El error anterior ocurrió en el componente: en el Proveedor (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:14:20) Considere agregar un límite de error a su árbol para personalizar el error manejar el comportamiento.

--- Advertencia: No se puede realizar una actualización del estado de react en un componente no montado. Esto es un no-op, pero indica una fuga de memoria en su aplicación. Para fijar, cancelar todas las suscripciones y tareas asincrónicas en una función de limpieza Effect.

Tan pronto como quite la tienda Proveedor = {store} /Provider wrapper todo funciona bien, que puede ser el problema, también cuando intento añadir componentes funcionales que he creado, el mismo error ocurre.

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

import { rootReducer } from "../redux/rootReducer.js";

import ReactPlayer from 'react-player'


import { compose, createStore } from "redux";
import { Provider } from "react-redux";
const store = createStore(
    rootReducer,
    compose(
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
            window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);

const app = (
    
        
    
);

function App() {
   
    return (
        

          
            
            
        
    );
}

export default App;

if (document.getElementById("app")) {
    ReactDOM.render(app, document.getElementById("app"));
}

Pregunta hecha hace 3 años, 4 meses, 29 días - Por geekglitcher

2 Respuestas:

• El error que estás viendo es debido a un par de problemas en tu código. Aquí te dejo algunas correcciones que puedes realizar:

  • Corrige la importación de ReactPlayer, ya que el nombre del componente es en minúsculas:

  javascript
     import ReactPlayer from 'react-player';
     

  • Cambia <provider> a <Provider> en la definición de tu aplicación:

  javascript
     const app = (
         
         
     );
     

  • En lugar de <reactplayer>, utiliza <ReactPlayer> con la "R" mayúscula y con minúscula la "p":

  javascript
     return (
         
  
             
         
     );
     

  Realizando estas correcciones, deberías poder insertar el componente de ReactPlayer de la biblioteca de terceros sin problemas en tu aplicación.

  Respondida el Dec 18, 2020 a las 12:12 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El error que estás recibiendo indica que estás llamando a un hook de React (como useEffect o useState) fuera de un componente funcional. Esto puede ocurrir si estás llamando a un hook dentro de un componente basado en clases o si estás llamando a un hook desde fuera de un componente.

  En tu caso, parece que estás llamando al hook useEffect desde fuera de un componente funcional, en concreto, dentro del objeto app. Para resolver este problema, debes mover la llamada a useEffect dentro del componente funcional App. Aquí tienes el código actualizado:

  
  import React, { useEffect, useState } from "react";
  import ReactDOM from "react-dom";
  
  import { rootReducer } from "../redux/rootReducer.js";
  
  import ReactPlayer from 'react-player'
  
  
  import { compose, createStore } from "redux";
  import { Provider } from "react-redux";
  const store = createStore(
      rootReducer,
      compose(
          window.__REDUX_DEVTOOLS_EXTENSION__ &&
              window.__REDUX_DEVTOOLS_EXTENSION__()
      )
  );
  
  function App() {
     useEffect(() => {
         // Código que se ejecutará después del renderizado inicial
     }, []);
  
      return (
          
  
  
              
  
          
      );
  }
  
  export default App;
  
  if (document.getElementById("app")) {
      ReactDOM.render(, document.getElementById("app"));
  }
  

  Además, también estás llamando al hook useState desde fuera de un componente funcional, en concreto, dentro del objeto app. Para resolver este problema, debes mover la llamada a useState dentro del componente funcional App. Aquí tienes el código actualizado:

  
  import React, { useEffect, useState } from "react";
  import ReactDOM from "react-dom";
  
  import { rootReducer } from "../redux/rootReducer.js";
  
  import ReactPlayer from 'react-player'
  
  
  import { compose, createStore } from "redux";
  import { Provider } from "react-redux";
  const store = createStore(
      rootReducer,
      compose(
          window.__REDUX_DEVTOOLS_EXTENSION__ &&
              window.__REDUX_DEVTOOLS_EXTENSION__()
      )
  );
  
  function App() {
     const [state, setState] = useState({count: 0});
  
     useEffect(() => {
         // Código que se ejecutará después del renderizado inicial
     }, []);
  
      return (
          
  
  
              
  
          
      );
  }
  
  export default App;
  
  if (document.getElementById("app")) {
      ReactDOM.render(, document.getElementById("app"));
  }
  

  Por último, asegurate de que estás importando correctamente la biblioteca react-player. Aquí tienes el código de importación correcto:

  
  import ReactPlayer from 'react-player'
  

  Respondida el Dec 18, 2020 a las 12:21 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---