1

WebDataRock TypeError：无法读取 nul 的属性“元素”和 WebDataRocks：无法绘制枢轴。

问候。

我尝试在我的 react-app 项目中实现 WebDataRocks，我可以实现 WebDataRock.Pivot 组件，但由于开始渲染组件，控制台打印此消息

webdatarocks.js:180 Uncaught TypeError: Cannot read property 'element' of null at new e (webdatarocks.js:180) at b.setControls (webdatarocks.js:1006) at webdatarocks.js:992

几秒钟后，控制台打印：

index.js:1 WebDataRocks：无法绘制枢轴。

    import React from "react";
         import ReactDOM from "react-dom";
         import WebDataRocks from "webdatarocks";
     
         export class Pivot extends React.Component<WebDataRocks.Params, any> {
         webdatarocks: WebDataRocks.Pivot;
         
         componentDidMount() {
            const tempProps : any = this.props;
            const pivotData = tempProps.pivotData;
            const columnsData : any[] = tempProps.columnsData;
     
            const tempColums = [];
            const tempKeys = [];
     
            columnsData.forEach(cd => {
                const tempLabelColumn = cd.title;
                tempColums.push(tempLabelColumn);
                tempKeys.push(cd.key);
            });
     
            this.webdatarocks = new WebDataRocks({
                toolbar: true,
                report: {
                    dataSource: {
                        data: pivotData
                    },
                    slice: {
                        rows: tempKeys,
                        expands: {
                            expandAll: true
                        },
                        measures: [{
                            "uniqueName": "Price",
                            "aggregation": "sum",
                            "format": "currency"
                        }, {
                            "uniqueName": "Discount",
                            "aggregation": "sum",
                            "format": "currency"
                        }],
                        columns: tempColums,
                    },
                    options: {
                        "grid": {
                            "type": "flat"
                        },
                    },
                    formats: [{
                        "name": "",
                        "thousandsSeparator": " ",
                        "decimalSeparator": ".",
                        "decimalPlaces": 2,
                        "maxSymbols": 20,
                        "currencySymbol": "",
                        "currencySymbolAlign": "left",
                        "nullValue": " ",
                        "infinityValue": "Infinity",
                        "divideByZeroValue": "Infinity"
                    }]
                },
                container: ReactDOM.findDOMNode(this)
            });
         }
     
         componentWillUnmount() {
            // console.log('componentWillUnmount this.webdatarocks', this.webdatarocks.dispose);
            if (this.webdatarocks.dispose) {
                 // this code break the system
                // this.webdatarocks.dispose();
            }
         }
         
         shouldComponentUpdate() {
            return false;
         }
     
           render() {`enter code here`
            return <div>Pivot</div>;
           }
         }
     
         export default Pivot;

这是我的回应。 图片

有人可以帮我解决这个问题吗？

谢谢，我很感激任何帮助。

4

1 回答 1

0

这个错误意味着 WebDataRocks 找不到应该初始化的 DOM 元素。我尝试了以下 GitHub 示例：  https ://github.com/WebDataRocks/pivot-react/tree/master/typescript ，它对我来说效果很好。看来您的代码示例也是基于它的。

我对您的建议如下：首先将您的业务逻辑与 WebDataRocks 组件代码分开。这是 vanilla WebDataRocks 和您的 React 应用程序之间的代理代码：  https ://github.com/WebDataRocks/pivot-react/blob/master/typescript/src/webdatarocks/webdatarocks.react.tsx 。您可以将其用作创建自定义 WebDataRocks 可视化的基本组件。因此，应该修改的情况并不多。

这是客户端代码示例，您可以在其中初始化 WebDataRocks 报告和其他配置：https ://github.com/WebDataRocks/pivot-react/blob/master/typescript/src/App.tsx 。 

于 2021-06-04T09:07:38.190 回答