TypeError: cannot read property 'onMarksSelection' of undefined.
你好,
我正在尝试将侦听器附加到我的Tableau Viz,以注册该Viz的选定数据点。
仪表板呈现,监听器使用Tableau API Documentation以纯HTML和简单JS工作。
但是,当我在React JS中实现相同的东西时,出现了一些错误。具体来说就是上面截图中的那个。仪表板将正确呈现,但是当我尝试附加侦听器时会收到错误消息。
我已经根据API文档编写了此函数,但是我不确定有什么不起作用。
下面提供了侦听器功能的代码。
onMarksSelection(marksEvent) {
return marksEvent.getMarksAsync().then(function (marks) {
var dataPoints = [];
for (var markIndex = 0; markIndex < marks.length; markIndex++) {
var pairs = marks[markIndex].getPairs();
dataPoints.push(pairs);
}
return this.setState({points: dataPoints});
});
}
listenToMarksSelection() {
Viz.addEventListener(window.tableau.TableauEventName.MARKS_SELECTION, this.onMarksSelection);
// Error is coming from this line ^^^^
}
[知道它确实可以在纯HTML中工作,我认为这个问题与我的反应知识有关。
编辑::添加了其余代码并更改了.then函数,以使其更加清晰
import React from 'react';
import styled from 'styled-components';
import tableau from "tableau-api";
import Table from '../Table';
const OuterBox = styled.div `
min-height: 600px;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
`
var Viz;
class MapContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
viz: null,
containerDiv: null,
url: null,
options: null,
points: []
};
}
reportSelectedMarks(marks) {
var dataPoints = [];
for (var markIndex = 0; markIndex < marks.length; markIndex++) {
var pairs = marks[markIndex].getPairs();
dataPoints.push(pairs);
}
return this.setState({points: dataPoints});
}
onMarksSelection(marksEvent) {
return marksEvent.getMarksAsync().then(this.reportSelectedMarks());
}
listenToMarksSelection() {
Viz.addEventListener(window.tableau.TableauEventName.MARKS_SELECTION, this.onMarksSelection);
}
loadViz(){
this.state.containerDiv = document.getElementById("tableauViz");
this.state.url = "URL TAKEN OUT for security but goes here";
this.state.options = {
width: "100%",
height: "600px",
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
Viz = new window.tableau.Viz(this.state.containerDiv, this.state.url, this.state.options);
// Create a viz object and embed it in the container div.
}
removeMarksSelectionEventListener() {
Viz.removeEventListener(window.tableau.TableauEventName.MARKS_SELECTION, this.onMarksSelection());
}
componentDidMount(){
this.loadViz();
}
render() {
return (
<OuterBox id="outerBox">
<div id="tableauViz">
</div>
<div id="Buttons">
<button onClick={this.listenToMarksSelection}>Start listening</button>
<button onClick={this.removeMarksSelectionEventListener}>Run this code</button>
</div>
</OuterBox>
);
}
}
导出默认MapContainer;
import React from "react";
import tableau from "tableau-api";
import styled from "styled-components";
import Table from "../Table";
const OuterBox = styled.div`
min-height: 600px;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
`;
var Viz;
class MapContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
viz: null,
containerDiv: null,
url: null,
options: null,
points: []
};
}
reportSelectedMarks(marks) {
var dataPoints = [];
for (var markIndex = 0; markIndex < marks.length; markIndex++) {
var pairs = marks[markIndex].getPairs();
dataPoints.push(pairs);
}
this.setState({ points: dataPoints });
}
onMarksSelection(marksEvent) {
return marksEvent
.getMarksAsync()
.then(marks => this.reportSelectedMarks(marks));
}
listenToMarksSelection() {
Viz.addEventListener(
window.tableau.TableauEventName.MARKS_SELECTION,
this.onMarksSelection()
);
}
loadViz() {
this.state.containerDiv = document.getElementById("tableauViz");
this.state.url = "URL TAKEN OUT for security but goes here";
this.state.options = {
width: "100%",
height: "600px",
hideTabs: true,
onFirstInteractive: function() {
console.log("Run this code when the viz has finished loading.");
}
};
Viz = new window.tableau.Viz(
this.state.containerDiv,
this.state.url,
this.state.options
);
// Create a viz object and embed it in the container div.
}
removeMarksSelectionEventListener() {
Viz.removeEventListener(
window.tableau.TableauEventName.MARKS_SELECTION,
this.onMarksSelection()
);
}
componentDidMount() {
this.loadViz();
}
render() {
return (
<OuterBox id="outerBox">
<div id="tableauViz"></div>
<div id="Buttons">
<button onClick={this.listenToMarksSelection}>Start listening</button>
<button onClick={this.removeMarksSelectionEventListener}>
Run this code
</button>
</div>
</OuterBox>
);
}
}