Quisiera que alguien me pueda ayudar con este error en React.
Error: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
- Es posible que tenga versiones no coincidentes de React y el renderizador (como React DOM)
- Puede que esté infringiendo las reglas de los Hooks
- 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 depurar y solucionar este problema.
Mas detalles del error:
▼ 30 stack frames were expanded.
resolveDispatcher
C: /Users/Caleb99/node_modules/react/cjs/react.development.js: 1476
useContext
C: /Users/Caleb99/node_modules/react/cjs/react.development.js: 1484
useParams
C: / Users / Caleb99 / Documents / proyectos react / modules / hooks.js: 40
MovieDetails
C: / Users / Caleb99 / Documents / proyectos react / virgen / src / pages / MovieDetails.jsx: 7
renderWithHooks
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 14985
mountIndeterminateComponent
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 17811
beginWork
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 19049
HTMLUnknownElement.callCallback
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 3945
invokeGuardedCallbackDev
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 3994
invokeGuardedCallback
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 4056
beginWork $ 1
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 23964
performUnitOfWork
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 22776
He leido mucho acerca de hooks pero aun no logro identificar el error. La linea que muestra error es esta:
import React from "react";
import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { get } from "../utils/httpClient";
import styles from "./MovieDetails.module.css";
export function MovieDetails() {
const { movieId } = useParams(); //----> aqui se explota la app por este hooks importado
const [movie, setMovie] = useState(null);
useEffect(() => {
get("/movie/" + movieId).then((data) => {
setMovie(data);
});
}, [movieId]);
if (!movie) {
return null;
}
const imageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
return (
<div className={styles.detailsContainer}>
<img
className={`${styles.col} ${styles.movieImage}`}
src={imageUrl}
alt={movie.title}
/>
<div className={`${styles.col} ${styles.movieDetails}`}>
<p className={styles.firstItem}>
<strong>Title:</strong> {movie.title}
</p>
<p>
<strong>Genres:</strong>{" "}
{movie.genres.map((genre) => genre.name).join(", ")}
</p>
<p>
<strong>Description:</strong> {movie.overview}
</p>
</div>
</div>
);
}
Aqui llamo al componente:
import React from "react";
import styles from "./App.module.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { MovieDetails } from "./pages/MovieDetails";
import { LandingPage } from "./pages/LandingPage";
export function App() {
return (
<Router>
<header>
<Link to="/">
<h1 className={styles.title}>Movies</h1>
</Link>
</header>
<main>
<Switch>
<Route exact path="/movies/:movieId">
<MovieDetails />
</Route>
<Route path="/">
<LandingPage />
</Route>
</Switch>
</main>
</Router>
);
}
Detalles de React: npm ls react
+-- react-dom@17.0.2
| `-- react@17.0.2
+-- react-icons@4.3.1
| `-- react@17.0.2 deduped
+-- react-infinite-scroll-component@6.1.0
| `-- react@17.0.2 deduped
`-- react-router-dom@5.3.0
+-- react-router@5.2.1
| +-- mini-create-react-context@0.4.1
| | `-- react@17.0.2 deduped
| `-- react@17.0.2 deduped
`-- react@17.0.2 deduped
Soy nuevo en react, les agradeceria la ayuda.
const { movieId } = useParams();
, colócalo en la siguiente línea después deuseState
, te sugiero agregar el componente completo a la pregunta, saludosreact-router
estas usando? también agrega eso; será de utilidad si agregas el componente donde esta elRoute
que tiene comopath
MovieDetails
, para ver si se están pasando los parámetros correctamente.