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, 5 meses, 6 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 - Corrige la importación de
-
El error que estás recibiendo indica que estás llamando a un hook de React (como
useEffect
ouseState
) 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 objetoapp
. Para resolver este problema, debes mover la llamada auseEffect
dentro del componente funcionalApp
. 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 (
, document.getElementById("app")); }Además, también estás llamando al hook
useState
desde fuera de un componente funcional, en concreto, dentro del objetoapp
. Para resolver este problema, debes mover la llamada auseState
dentro del componente funcionalApp
. 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 (
, 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