class TodosComponent extends Component{ constructor(props){ super(props) this.state= { id: this.props.id,//here id is not getting properly set i think description: 'My name is prathvi', targetDate : moment(new Date()).format('YYYT-MM-DD') } this.onSubmit = this.onSubmit.bind(this) this.validate = this.validate.bind(this) } componentDidMount(){ let username = AuthenticationService.getUserLoggedIn(); TodoDataService.retriveTodo(username,this.state.id)//while calling request i am getting error bcoz id is going as undefined .then(response=> this.setState({ description : response.data.description, targetDate : moment(response.data.targetDate).format('YYYT-MM-DD') })) }// código para llamar al servicio de arranque de primavera
import axios from "axios"; class TodoDataService{ retriveAllTodos(name){ return axios.get(`http://localhost:8080/users/${name}/todos`) } retriveTodo(name,id){ return axios.get(`http://localhost:8080/users/${name}/todos/${id}`) } deleteTodos(name,id){ return axios.delete(`http://localhost:8080/users/${name}/todos/${id}`) } } export default new TodoDataService();Pregunta: En la clase anterior TodoComponente dentro de this.state he declarado id, que devuelve nulo cuando llamo a una solicitud y recibe este error: GET http://localhost:8080/users/prathvi/todos/ undefined 400. En realidad soy un principiante y estoy viendo el tutorial y haciendo el programa. Él está usando reaccionar 5 y tengo reaccionar 6. En realidad, está usando id: this.props.match.params.id dentro de this.state. Y si lo estoy usando, recibo este error TodosComponent.jsx: 12 TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'parámetros'). ¿Alguien puede ayudarme qué usar para resolver este error? He revisado varias publicaciones pero no he resuelto este error.
El problema es por qué id está devolviendo indefinido: no he inyectado parámetros a mi clase. Y estoy intentando cambios en la misma clase TodosComponent class haciendo id: this.props.match.params.id, o intentando algo diferente en la función componentDidMount. Puedes ver la pregunta, cómo lo estaba usando.
A continuación se muestra mi código de trabajo: Para V6 STEP1: inicialice la identificación como a continuación
class TodosComponent extends Component{ constructor(props){ super(props) this.state= { id: this.props.params.id,//initialisg id in react v6 description: 'My name is prathvi', targetDate : moment(new Date()).format('YYYT-MM-DD') } console.log(this.props.params.id) } //remaing code of class which is not useful.PASO 2: Cree un archivo con withParams.jsx u otro nombre con extensión .jsx y pegue el código debajo.
import { useParams } from "react-router-dom"; function withParams(Component) { return props => <Component {...props} params={useParams()} />; } export default withParamsPASO 3: inyecte useParams en un lugar donde haya declarado la información de enrutamiento
import withParams from './withParams' class TodoApp extends Component { render() { const TodosComponentWithParams = withParams(TodosComponent);//this is how we are injecting the class which we declare in step1 return ( <div className='TodoApp'> <Router > <Routes> <Route path='/todos/:id' element={<AuthenticateRoute> //using here <TodosComponentWithParams/></AuthenticateRoute>} /> </Routes> </Router> </div> ); }} export default TodoApp;Ahora, después de hacer esto, si ejecuta el código de la instrucción console.log de la clase TodosComponent en lugar de imprimir undefind , imprimirá el valor.