情节 onClick 事件导致 React 中无限渲染循环

2023-12-19

运行使用事件属性的 onClick 处理程序会导致反应中的无限循环:

import React, {useState, useEffect} from 'react';
import Plot from 'react-plotly.js';
import ReactDOM from 'react-dom';

function PlotlyTest() {
    const [coord, setCoord] = useState([]);
    
    const handleClick = event => {
        const point = event.points[0];
        setCoord([point.x, point.y, point.z])
    }

    useEffect(() => console.log(coord))

    return (
        <div>
            <Plot
            data={[
                {
                x: [-2.294, -2.28, -2],
                y: [6.18, 7.19, 8],
                z: [
                    [0.16, 0.16, 0.16],
                    [-0.11, -0.22, -0.62],
                    [-0.1, -0.2, -0.3]
                ],
                    type: 'surface',
                    "mode": "markers",
                    opacity: 0.6
                },
            ]}            
            onClick={handleClick}
            />
        </div>
    );
}

ReactDOM.render(
  <React.StrictMode>
      <PlotlyTest/>
  </React.StrictMode>,
  document.getElementById('root')
);

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

情节 onClick 事件导致 React 中无限渲染循环 的相关文章

随机推荐

  • 如何启用 Guard Malloc

    这是一个愚蠢的问题 文档说 要使用 Guard Malloc 启用调试 请在运行项目之前在 Xcode 中选择 运行 gt 启用 Guard Malloc 选项 启用此选项后构建并运行您的应用程序会自动使用 Guard Malloc 库运行
  • 默认 MVC 5 应用程序的安全异常

    将 VS 2013 生成的默认 MVC 5 应用程序部署到我的托管帐户时 我遇到了安全异常 对于这个问题有什么快速的解决办法吗 Description The application attempted to perform an oper
  • Yii2:在字段模糊时禁用 ActiveForm Ajax 验证

    如何自动禁用 Yii validation onblur ajax 验证 我只想在按下提交按钮后进行验证 您想使用enableAjaxValidation验证您的表单 同时不希望在每个表单上触发 ajax 验证blur当您输入该字段后 您只
  • _NET_WM_ICON 的图片格式

    环境 Ubuntu 16 04 在我的应用程序中 我通过调用获取应用程序的图标XGetWindowProperty with NET WM ICON atom unsigned char data XGetWindowProperty da
  • 对空结果集的非法操作[重复]

    这个问题在这里已经有答案了 我正在尝试在一家杂货店建立一个收银台 我的代码实际上执行了我想要它做的事情 但有一点是这样的 在我要求用户输入他们想要的商品数量后 产品信息被收集并且工作正常 但是当它应该要求用户输入下一个产品的产品 ID 时
  • 如何获取视频的完整时长和当前播放时长?

    我需要使用 swift 创建一个自定义视频插件 但我不知道如何获取视频的完整持续时间和当前播放时间 在我的控制台中刚刚出现了这个输出 C CMTime 我不确定我的代码有什么问题 My code let url NSBundle mainB
  • JSF 2.2 SelectManyCheck 破坏了 javascript

    它曾经在 jsf 2 0 上完美工作 但知道它会在屏幕末尾呈现一个框 其中包含一个包含位置数据的 html 表 如果我删除转换器 则 selectmany 复选框有效 但它仍然呈现该框
  • Jupyter输入、显示、打印执行顺序混乱

    我使用的是 Jupyter Python 版本是 3 5 在我的while循环 执行顺序不正确 这input显示了一次迭代的结果before决赛print上一次迭代的 这是我的代码 from IPython display import d
  • 如何检查变量是否为数值?

    PHP PDO 的lastInsertId 方法实际上返回一个数值 但它也可能返回一些完全不同的东西 比如一些奇怪的SQLSTATE 代码或其他什么 无论如何 它返回的不是数值 我想记录一个错误 有没有办法安全地检查这一点 Use is i
  • 为什么不能使用 WebCrypto 导出 HKDF 密钥?

    我想获取密码并通过 PBKDF2 运行它来创建主密钥 然后我想通过 HKDF 运行它来创建多个密钥 好像crypto subtle deriveKey不会接受 HKDF 作为derivedKeyAlgorithm 换句话说 我无法让这样的事
  • 在JSF页面中显示HashMap条目的键和值

    我想显示HashMapJSF UI 中的键及其关联值 我怎样才能实现这个目标 我如何迭代HashMap在 JSF 页面中使用一些迭代器组件 例如
  • 在 OSX 10.9.1 上安装 Google Cloud SDK 时遇到问题

    这里是个新手 我正在尝试按照此处的指南安装 GC SDK https developers google com compute docs gcutil https developers google com compute docs gc
  • 我收到错误:配置“编译”已过时,已被“实现”替换。将于2018年底删除

    更新 Android Gradle 插件和 Android Studio 后出现此错误 我已经检查过这个问题 Android Studio build gradle 警告消息 https stackoverflow com question
  • 重置类时 CSS 动画不会重新启动

    我正在使用CSS着色器 动画 我的着色器类定义如下 shader webkit filter custom url v vs mix url f fs multiply destination over 200 200 webkit ani
  • 在 SQL Server 存储过程中动态创建和选择表变量?

    请指导我如何动态创建表变量 我知道它可以是这样的 DECLARE people TABLE id INT name VARCHAR 32 如果不知道列和数据类型 我将如何创建 场景是我必须根据物理表创建表变量并将数据选择到其中 在 SP 中
  • keyDown:(NSEvent *)当焦点位于文本字段时不会调用事件

    我已经覆盖了 void keyDown NSEvent event in my NSPanel子类 但是 仅当焦点不在某个对象上时才会调用它NSTextField在我的面板里面 不过我需要赶上这个事件 按下输入按钮 无论焦点是在文本字段还是
  • 为什么我的上传路径无效? (Codeigniter-库)

    我正在创建一个库作为项目的一部分 其中一种方法是上传帮助程序的包装器 方法 public function upload echo Doing upload config upload path RESOURCE PATH Download
  • Flask-WTForms:如何检查某个字段是否为必填字段?

    我通过以下方式定义了一个表单 class LoginForm Form login EmailField u Email address required length min 5 max 2048 validators Email pas
  • gwtQuery 的优点

    有人可以告诉我使用 gwt 查询有什么好处吗 它只是为了 css 效果吗 以及我们如何使用它来创建像 gwt 这样的 ui 元素 我的理解是在项目中使用标签 文本框 按钮等gwt组件 然后gwt查询只是为了给这些组件带来一些效果 是这样的吗
  • 情节 onClick 事件导致 React 中无限渲染循环

    运行使用事件属性的 onClick 处理程序会导致反应中的无限循环 import React useState useEffect from react import Plot from react plotly js import Rea