javascript - C3 和 React - DOMException

转载作者：行者123 更新时间：2023-11-30 19:45:22

27

4

我正在尝试使用 C3 在我的 React 项目中呈现图表。

问题

我所做的是动态生成一个 id (UUID) 并将其附加到我的图表组件中的 div。然后，在组件在 componentDidMount 中呈现后调用一些代码。这是一个常见的模式，我在其他项目中也看到过。

起初，一切似乎都很好。但是反复刷新页面后，有时图表生成不起作用。我得到的错误是:

DOMException: Failed to execute 'querySelector' on 'Document': '#a-really-long-id' is not a valid selector.

我尝试了什么

我尝试使用 setTimeout 延迟附加图表时，但奇怪的是我仍然得到相同的结果，即使在延迟 10 秒之后。这使我相信这不是竞争条件，而是由其他原因引起的。也许 C3 只读取一次 DOM 并且不响应更改？但这并不能解释为什么它有时...

有效

即使尝试从 Chrome 开发者控制台通过 id 选择元素也没有用。

代码

这是我的完整组件代码:

// assets/js/index.jsx
import React from 'react';
import uuid from 'uuid/v4';
import c3 from 'c3';


class Chart extends React.Component {
    constructor(props) {
        super(props);

        this.id = uuid();
        this._update = this._update.bind(this);
    }

    _update() {
        const data = this.props.data;
        this.chart = c3.generate({
            bindto: `#${this.id}`,
            data: {
                columns: [
                    ['Male', 0],
                    ['Female', 0],
                    ['Brand', 0]
                ],
                type: 'bar',
                colors: {
                    Male: '#0066CC',
                    Female: '#FF6666',
                    Brand: '#808080'
                },
                groups: [
                    ['Male', 'Female', 'Brand']
                ],
                order: null
            },
            bar: {
                width: {
                    ratio: 0.3
                }
            },
            transition: {
                duration: 500
            },
            tooltip: {
                show: false
            },
            axis: {
                x: { show: false },
                y: { show: false },
            },
            size: { width: 220, height: 320 },
            grid: {
                x: { show: false }
            },
            legend: {
                show: false
            }
        });

        setTimeout(function() {
            this.chart.load({
                columns: [
                    ['Male', data.male],
                    ['Female', data.female],
                    ['Brand', data.brand]
                ]
            });
        }, 500);
    }

    componentDidMount() {
        this._update();
    }

    render() {
        return (
            <div id={this.id} className="chart"></div>
        );
    }
}


export default Chart;

最佳答案

这可以添加为评论，但由于它很大，所以将其添加为答案。

您使用的是 html4/html5 语义吗？

根据 HTML4 ( https://www.w3.org/TR/html401/types.html )

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

根据 HTML5 ( https://www.w3.org/TR/html5/dom.html )

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters.

您的 uuid 有时可能会生成有效的 Id，有时可能不会(不确定 uuid 是如何工作的)

如果您不使用 HTML5 语义，您可以简单地添加 <!DOCTYPE html>

在您的 html 文档的顶部尝试一下。

此外，

您在逻辑中使用了 settimeout，并在逻辑中使用了 this.Chart

this ，现在将引用 settimeout 而不是类。

你可以尝试改变

setTimeout(function() {
        this.chart.load({
            columns: [
                ['Male', data.male],
                ['Female', data.female],
                ['Brand', data.brand]
            ]
        });
    }, 500);

到

  setTimeout( () => {
        this.chart.load({
            columns: [
                ['Male', data.male],
                ['Female', data.female],
                ['Brand', data.brand]
            ]
        });
    }, 500);

关于javascript - C3 和 React - DOMException，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54995717/

27

4

0

文章推荐： c# - 统计某个类的对象被实例化的次数

文章推荐： c# - 如何在 Windows Phone 7 中读取 SIM 卡详细信息？

文章推荐： c# - MVC4 _Layout.cshtml 脚本包

文章推荐： javascript - 如何将自定义按钮和对话框迁移到 TinyMCE 5

dart - DOMException 中无法解释的标识符
我正在尝试使用 Google 的 Material 设计。我在下面有一个组件，其路径是 epimss_design/lib/component/menu/main-menu-form.html； e
java - 删除节点时遇到 DOMException
我在导航文档对象以删除特定节点时遇到 DOMException.HIERARCHY_REQUEST_ERR，在谷歌搜索此错误代码后，它说: “HIERARCHY_REQUEST_ERR:如果此节点的类
javascript - DOMException 权限被拒绝 - 定期后台同步
我已经使用 React JS 为 service worker 注册了 JS 文件。但是，当我尝试注册 periodic-background-sync 时出现错误。我需要在谷歌浏览器中进行任何设置吗
javascript - polymer 未捕获的 DOMException
我在 Polymer 2 中有一个简单的 todo aap。它工作得很好，但是当我从 Polymer 目录添加元素时，我收到以下错误？还有纸张输入不能正常显示？检查屏幕截图。一切都很好我不知道为什么这
javascript - WebSql 结果集中的 DOMException
我一直在查询 websql 数据库表。在这里，插入和删除语句工作正常。但是当我尝试执行 findAll 查询时，本质上是'select * from myTable'，它返回一个带有 DOMExce
javascript - 视频没有开始播放，而是抛出 DOMException
我刚刚动态创建了视频对象，然后在将视频对象附加到文档中之前添加了 2 个属性，例如 source 和 muted，最后使用方法 play() 播放添加的视频，如下所示。 let v = documen
java - 如何在不出现 DOMException 的情况下将节点复制到不同的文档？
在“我的应用程序”中，我想将节点从一个文档复制到另一个文档。这是代码。 Element entryElement, operationElement; for (int i = 0; i < eve
java - appendChild 处的 DOMException
我正在尝试通过替换其中的某些元素来使用 DOM 修改 XML 文档，但出现以下异常: 03-10 10:49:20.943: W/System.err(22584): org.w3c.dom.D
javascript - native 加密加密抛出 DOMException
我正在使用 native-crypto 包，它是一个用于跨平台加密的 API(例如 web 和 node.js)。 let crypto = require("native-crypto"); 我已经
javascript - 谷歌浏览器在播放音频时未捕获( promise )DOMException
Chrome 会阻止自动播放音频/视频。我找到了自动播放视频的解决方案，但我的用例需要自动播放音频。这是我的代码: let audio = new Audio('music/test.mp3'); a
javascript - 无法加载音频-DOMException:加载失败，因为找不到支持的源
我正在尝试加载音频，但遇到了两个错误，但是一切都很好，并且来源是正确的。错误: GET http:// localhost:4200 / src / assets / sound / welcome
javascript - 以 blob 作为源播放音频时出现 DOMException
每当我运行此代码时 var blob = new Blob(["ninja.mp3"], {type:"audio/mp3"}); var audio = new Audio(URL.createOb
javascript - C3 和 React - DOMException
我正在尝试使用 C3 在我的 React 项目中呈现图表。问题我所做的是动态生成一个 id (UUID) 并将其附加到我的图表组件中的 div。然后，在组件在 componentDidMount
javascript - 在 Chrome 中播放音频时抛出 domexception
您好，我在 Chrome 中播放音频时遇到异常。这是我播放音频的功能 $(document).ready(function () { generateAlarm(); }); functio
javascript - 加载模块时出现 AudioWorklet DOMException 错误
我正在开发一个 WebAudio 应用程序，它需要 AudioWorklets 并且需要来自许多不同脚本的函数以用于 process() 函数。因此，我尝试使用 import 命令在 processo
javascript - 安装和使用 polymer 元素后未捕获的 DOMException
我正在学习本教程，该教程教授 polymer 元件的安装: https://www.polymer-project.org/3.0/start/toolbox/add-elements 运行 npm
javascript - 视频播放器错误未捕获在 promise DOMException 中
我有Video Player 。但是当我改变质量时它给出了这个错误 Uncaught (in promise) DOMException: The play() request was interru
javascript - 解密 RSA 数据时出现 DOMException
我正在尝试将加密数据从服务器发送到客户端，并使用window.crypto.subtle.decrypt()对其进行解密。但我有一个没有描述的错误。我该如何修复它？ node.js 服务器代码: co
javascript - 如何在 Chrome 中捕获 DOMException？
我收到这个错误: Uncaught (in promise) DOMException: lockOrientation() is not available on this device. co
javascript - IndexedDB:未捕获( promise )DOMException
我正在使用 indexedDB(通过 npm 的 idb 包装器)来存储表示音频 channel 数据的 2D Float32 数组。它在一段时间内工作正常，但是，当其中一个数组的长度达到大约 166

首页

博学

6Ren·AI

商城

javascript - C3 和 React - DOMException

问题

我尝试了什么

代码