Soy nuevo en ReactJS y JavaScript y estoy tratando de pasar la ID a través de la URL a "UserInfo.js", luego intento obtener esta ID en "GetUser.js" y con esta ID pido a la API que me muestre información. (como inicio de sesión, identificación, etc.) de DataBase. Tengo un problema con React. La API funciona bien en swaggerUI.
Código de GetUser.js:
import React,{ Component } from 'react'; import { stringify } from 'uuid'; import UserInfo from './UserInfo'; export class GetUser extends Component{ constructor(props){ super(props); this.state = { id: null, userTable: [], }; } componentDidMount(){ var test = <UserInfo/>; this.state.id = test; this.GetUserById(); } GetUserById(){ let id; fetch(process.env.REACT_APP_API+'User/'+{id},{ method:'GET', header:{'Accept':'application/json', 'Content-Type':'application/json'} }) .then(response=>response.json()) .then(data=>{ this.setState({userTable:data}); }); } render(){ return(this.state.id) } }Código de UserInfo.js
import React from 'react'; import { useParams } from 'react-router-dom'; function UserInfo(){ let { id } = useParams(); return (id); } export default UserInfo;Enrutamiento:
import React, {Fragment} from 'react'; import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'; import {LoginPage} from './LoginPage'; import {Home} from './Home'; import UserInfo from './UserInfo'; import {Users} from './Users'; import {AddUser} from './AddUser'; import {GetUser} from './GetUser'; import {Profile} from './Profile'; function Routers() { return ( <Router> <Fragment> <Routes> <Route exact path='/' element={<LoginPage/>}/> <Route exact path='/Home' element={<Home/>}/> <Route exact path='/Uzytkownicy' element={<Users/>}/> <Route path='/DodajUzytkownika' element={<AddUser/>}/> <Route exact path="/Uzytkownicy/:id" element={<GetUser/>} component={UserInfo}/> <Route path='/Profil' element={<Profile/>}/> </Routes> </Fragment> </Router> ); } export default Routers;Solo lo que obtuve de la consola es "[objeto Objeto]" o errores de Hooks Imagen de errores en la red
Prueba esto en la búsqueda:
fetch(process.env.REACT_APP_API+`User/${id}`,{ method:'GET', header:{'Accept':'application/json', 'Content-Type':'application/json'} })Aviso a " ` " alrededor de la URL.
Dime, ¿te ayudó?
En un componente de clase React, puede acceder a los parámetros usando this.props.location.search .
Puedes analizar el resultado así:
new URLSearchParams(this.props.location.search).get("id") No intentaría acceder a los ganchos de React (como useParams ) en un componente de clase. El propósito de los ganchos en React es proporcionar métodos de estado y ciclo de vida a los componentes funcionales, pero los componentes de clase ya tienen estas cosas. Está creando un componente funcional ( UserInfo ) simplemente para que pueda llamar a un enlace para poder acceder al estado al que su componente de clase ya tiene acceso.