TypeError:无法读取未定义的属性'onMarksSelection‘。尝试使用React js将事件侦听器附加到tableau viz时。

Question

Error Message

TypeError: cannot read property 'onMarksSelection' of undefined.

你好,

我正在尝试将侦听器附加到我的Tableau Viz，以注册来自该Viz的选定数据点。

仪表板使用Tableau API Documentation在普通超文本标记语言和简单JS中呈现和侦听程序。

然而，当我在React JS中实现同样的事情时，我得到了一些错误。特别是上面截图中的那个。仪表板将正确呈现，但当我尝试附加侦听器时，出现错误。

我已经按照API文档编写了这个函数，但我不确定它有什么不起作用。

下面是listener函数的代码。

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中确实有效，我认为这个问题是我的react知识所致。

为了清晰起见，添加了其余代码并更改了.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；

Answer 1

应该修复上述错误的更新代码：

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>
    );
  }
}