0
215
VistasReact TypeError: no se pueden leer las propiedades de undefined (leyendo 'parámetros')
En React, tengo un TreeView recursivo que funciona bien. Cuando se procesa el árbol, los accesorios derivados de los datos del árbol, como catid, se pasan a un componente TreeNode que luego procesa las instancias de React Link. Estos enlaces ahora pueden tener parámetros como catid:
<Link to={'/Comp1/' + catid}>{catname}</Link>y estos forman los elementos seleccionables del TreeView.
En App.js, tengo una ruta como esta:
<Route path="/Comp1/:catid"> <Comp1 /> </Route>Entonces, cuando se hace clic en Enlace, el parámetro catid se pasa al componente.
Este componente Comp1 está estructurado de la siguiente manera:
import React, { Component } from 'react'; export default class Comp1 extends Component { constructor() { super(); this.state = { catid: 0 }; } componentDidMount() { this.setState({ catid: this.props.match.params }); } render() { return ( <div> Hello, I am class Comp1, clicked item { this.state.catid } </div> ); } };Ahora, cuando se ejecuta la aplicación, se bloquea mientras la salida de depuración es la siguiente:
1 Respuestas
Responde la pregunta0
Encontré esto en alguna parte.
Tuve que extender la ruta con una representación del componente de destino y luego puede especificar los parámetros que necesita como accesorios para el componente, que obtienen su valor de props.match.params:
<Route exact path="/Comp1/:catid/:catname" render={(props) => ( <Comp1 catid={props.match.params.catid} catname={props.match.params.catname} /> )} />En el enlace, simplemente dices:
<Link to={'/Comp1/' + catid + '/' + catname}>{catname}</Link>En el componente de destino, simplemente puede hacer:
import React, { Component } from 'react'; export default class Comp1 extends Component { render() { return ( this.props.catname ? <div>Hello, I am class Comp1, clicked item: {this.props.catname} id={this.props.catid}</div> : null ); } };Al hacer clic en otro enlace, se actualizarán los accesorios del componente y se volverán a renderizar.