reactjs - 画面 react : Embeded Tableau sheet won't update on url change

Question

我正在尝试将 Tableau 工作表嵌入到我的 ReactJS 应用程序中。我有一个包含报告名称列表的菜单(在 react 中)，当单击菜单项时，它会更新包含报告名称的状态。我决定使用 tableau-react npm 包来完成这个任务。

当我第一次点击菜单项时，它会将画面报告正确地嵌入到页面上。当我单击另一个菜单项(更新提供 url 的状态)时，画面报告刷新，但继续显示第一个报告，就好像 url 没有改变一样。如果我随后单击第三个菜单项，嵌入画面报告将再次刷新，但这次它将显示我单击的第二个报告项。每个后续的菜单项点击都会将嵌入画面报告刷新为上一个点击的项目。

我正在使用 Redux 控制状态，在 Redux 开发工具 中，我确定所有有状态的东西都在正确运行。每个菜单项单击正确更新状态。我还在传递给 TableauReport url 属性的 url 上放置了一个 console.log，这也是正确的。

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-react npm 包有问题。更改 url 时，它没有正确获取新 url 并将其传递给 tableau。我与 tableau-react 的所有者讨论了这个问题，我们部署了一个更改来解决这个问题。

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