0
256
Visualizaçõesd3+react.js al hacer clic en el texto del nodo del árbol d3 this.props.history.push da el error "No se pueden leer las propiedades de undefined (leyendo 'props')"
Con la ayuda de d3 y react.js, puedo crear un árbol de jerarquía d3
Lo que quiero lograr es que, al hacer clic en cada texto de nodo (p. ej., John, Luke, ...), debería dirigirse a la página de detalles de cada texto en el que se hizo clic.
nodes .append("text") .attr("font-size", "17px") .attr("text-anchor", "start") .text(function (d) { return `${d.data.name}` }) .on("click", function (event, d) { this.props.history.push(`/detail/${d.id}`); });constructor
constructor(props) { super(props); console.log(this.props) // there is history in props this.state = { isClicked: "" }; this.geGraph = this.getGraph.bind(this); // function where graph code presentsdespués de hacer clic en el texto del nodo. Recibo error.
Uncaught TypeError: Cannot read properties of undefined (reading 'history') Además, cuando depuro en línea this.props.history.push , no hay props en this .
Intenté seguir este Cómo usar React Router con gráficos d3.js para redirigir a otra pantalla . Todavía tengo el mismo problema. y cuando trato de ir a la función de flecha
.on("click", (event, d) => this.props.history.push(`/detail/${d.id}`)) esta vez da un problema para los accesorios Uncaught TypeError: Cannot read properties of undefined (reading 'props')
He agregado el historial en <Route history={createBrowserHistory()}/> y también import { createBrowserHistory } from "history"; . y export default withRouter(MyGraph) importado de import { withRouter } from 'react-router-dom'; .
Estoy usando la versión del enrutador "react-router-dom": "^4.3.1" y componentes basados en clases con mecanografiado.
¿Cómo resuelvo este problema?
¡Gracias por adelantado!
2 Respostas
Responde à pergunta0
Está utilizando esto en un alcance diferente , su alcance es funcional ahora, es mejor definir una función para hacer clic dentro del componente y llamarlo en el evento de clic.
O puede almacenar este valor en otra variable dentro del alcance de creación de nodos y usarlo desde allí.
0
De acuerdo con la documentación de la API DOM de javascript, la referencia a this será el elemento DOM en el que hará clic.
nodes .append("text") .attr("font-size", "17px") .attr("text-anchor", "start") .text(function (d) { return `${d.data.name}` }) .on("click", function (event, d) { // try console.log here console.log(this); // <--- most likely be a DOM element you clicked this.props.history.push(`/detail/${d.id}`); // <--- therefore this.props does not exist });Solución 1
use la función de flecha de Javascript:
.on("click", (event, d) => { console.log(this); // <--- this should refer to the parent object this.props.history.push(`/detail/${d.id}`); });Solución 2
o vincule el controlador de eventos de clic en el constructor con this
constructor(props) { super(props); console.log(this.props) this.state = { isClicked: "" }; this.geGraph = this.getGraph.bind(this); this.nodeClickHandler = this.nodeClickHandler.bind(this); } function nodeClickHandler (event, d) { this.props.history.push(`/detail/${d.id}`); } nodes .append("text") .attr("font-size", "17px") .attr("text-anchor", "start") .text(function (d) { return `${d.data.name}` }) .on("click", this.nodeClickHandler);