反应组件变量状态不保留最后更新的值

时间:2020-10-13 15:29:55

标签: javascript reactjs powerbi powerbi-embedded

我正在使用基于事件的库(powerbi-client-react)

首先,我应该从getEmbeddedComponent获取组件并将其设置在report变量中 然后使用report.getFilters()(基于promise的方法)获取一些值。

我试图获取getEmbeddedComponent内的值

getEmbeddedComponent={function (embeddedReport) {
  console.log("enter here", embeddedReport) // well entering here
  embeddedReport.getPages().then(function (filters) {
    console.log("get filters", filters);
  }).catch(function (errors) {
    console.log("error", errors);
  });
}}

但是我从没进入回调。

所以我尝试使用useState()并在getFilters内触发eventHandlers,但是值始终为{ test: "init" }(初始值

function App(props) {
  const [embedToken, setEmbedToken] = useState(props.token);
  const [report, setReport] = useState({ test: "init" });

  useEffect(() => {
    if (props.token === undefined) {
      props.requestToken();
    }
    setEmbedToken(props.token);
  }, [props.token]);
  return (
    <div className="App">
      <QueuesFilter />
      <PowerBIEmbed
        embedConfig={{
          type: "report", // Supported types: report, dashboard, tile, visual and qna
          id: props.reportInfos?.id,
          embedUrl: props.reportInfos?.embedUrl,
          accessToken: props.token,
          tokenType: models.TokenType.Aad,
          permissions: models.Permissions.All,
          settings: {
            panes: {
              filters: {
                expanded: true,
                visible: false,
              },
            },
            background: models.BackgroundType.Transparent,
          },
        }}
        eventHandlers={
          new Map([
            [
              "loaded",
              function (event) {
                console.log("Reporttest loaded", report);
              },
            ],
            [
              "rendered",
              function () {
                console.log("Reporttest rendered", report);
              },
            ],
            [
              "visualRendered",
              function () {
                console.log("Reporttest visualRendered", report);
              },
            ],
            [
              "error",
              function (event) {
                console.log(event.detail);
              },
            ],
          ])
        }
        cssClassName={"report-style-class"}
        getEmbeddedComponent={function (embeddedReport) {
          console.log("Reporttest getEmbeddedComponent", report);
          setReport(embeddedReport);
        }}
      />
      {/* <div className="report-style-class" ></div> */}
    </div>
  );
}

我几次重新加载应用程序,并始终以相同的顺序获取控制台日志 enter image description here

1 个答案:

答案 0 :(得分:2)

我知道,您想在事件处理程序中访问更新的报表对象。
推荐的方法是接受更新的报告作为事件处理程序的第二个参数
请参阅Docs > Usage > Set event handlers

mask = Image.new('L', im.size, 255)  # set color value 0 -> 255
draw = ImageDraw.Draw(mask) #unchanged
draw.rectangle([ (x1,y1), (x2,y2) ], fill=0)  # set fill level 255 -> 0
#this will create and inverted B/W mask

您正在获取报告状态的旧值,因为更新道具时,仅当事件/事件处理程序与以前的道具发生变化时,事件处理程序映射才会在PowerBIEmbed组件中更新。
因此,由于Closures in JS

,调用了旧的事件处理程序,该事件处理程序引用了报告变量的旧状态。