tableau-react：嵌入的 Tableau 工作表不会在 URL 更改时更新

Question

我试图将Tableau工作表嵌入我的ReactJS应用程序中。我有一个带有报告名称列表的菜单(在React(，当单击菜单项时，它更新包含报告名称的状态。我决定使用Tableau-reactect NPM软件包来完成此任务。

首次单击菜单项时，它将Tableau报告正确嵌入到页面上。当我单击另一个菜单项(更新为URL的状态(时，Tableau Report刷新了，但继续显示第一个报告，就好像URL没有更改一样。如果然后单击第三个菜单项，则嵌入图Tableau报告将再次刷新，但是这次它将显示我单击的第二个报告项目。随后的每个菜单项点击刷新嵌入式图表报告到上一个单击的项目。

我使用 redux 以及在 redux dev工具中控制状态我已经确定状态的所有内容都正确运行。每个菜单项单击正确更新状态。我还将控制台.log放在正在传递给 tableaureport url属性的URL上，这也是正确的。

const Reports = props => {
  const { reportUrl } = props;
  return (
    // Tableau Report Documentation:  https://github.com/coopermaruyama/tableau-react
    reportUrl && <TableauReport url={reportUrl} />
  );
};

用户互动

Menu Item Click            Tableau Report Shown
---------------            --------------------
null                       null
Report 1                   Report 1
Report 2                   Report 1
Report 3                   Report 2
Report 4                   Report 3
Report 5                   Report 4

Answer 1

tableau-reactect npm软件包存在问题。更改URL时，它不能正确地将新URL传递给Tableau。我与Tableau-React的所有者讨论了这个问题，我们进行了更改以解决该问题。

修复拉请请求：https：//github.com/coopermaruyama/tableau-react/pull/16