“TypeError：无法读取未定义的属性”在dash python中使用clientside_callback

Question

我正在使用 dash 和 manitine 组件 创建一个网站。为了保持对包的控制和运行网站，我使用

poetry

。该网站应该有一个 clientside_callback，用于单击按钮时（使用任何类型的操作，如

alert

或

console.log()

来查看它是否有效）。我想使用

ClientsideFunction

来注册回调。

使用

ClientsideFunction

实现回调并使用

poetry run -m website

运行网站时，出现错误

TypeError: Cannot read properties of undefined (reading 'showAlert')
    at _callee2$ (callbacks.ts:160:40)
    at tryCatch (callbacks.ts:2:1)
    at Generator.<anonymous> (callbacks.ts:2:1)
    at Generator.next (callbacks.ts:2:1)
    at asyncGeneratorStep (callbacks.ts:2:1)
    at _next (callbacks.ts:2:1)
    at callbacks.ts:2:1
    at new Promise (<anonymous>)
    at callbacks.ts:2:1
    at _handleClientside (callbacks.ts:209:2)

showAlert

的定义如下

/assets/js/callbacks.js

.

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        showAlert: function(n_clicks) {
            console.log("this worked!");
            return '';
        }
    }
});

在

callbacks.py

中，我定义了

namespace

和

function_name

，它们应该存在于

js

文件中（即

/assets/js/callbacks.js

）。

from dash import dash, Output, State, Input, callback_context, clientside_callback, ClientsideFunction

def get_callbacks(app):
    app.clientside_callback(
        ClientsideFunction(
            namespace="clientside",  # Namespace in the JavaScript file
            function_name="showAlert"  # Function name defined in the JavaScript file
        ),
        Output('connection_status', 'color'),
        Input('vnc_connect', 'n_clicks')
    )

这是

__main__.py

服务器获取布局和回调的地方。

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, html, Input, Output, callback, State
from website.layout import get_layout
from website.callbacks import get_callbacks

_dash_renderer._set_react_version("18.2.0")

app = Dash(assets_ignore=r"(?!callbacks\.js).*") # I only want this file to run

app.layout = get_layout()

get_callbacks(app)

if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True, port="8000")

这是

layout.py

，包含来自

mantine

的三个简单组件。

import dash_mantine_components as dmc
from dash import html

def get_layout():
    return dmc.MantineProvider(
        [
            dmc.Container([
                dmc.Badge("Disconnected", variant="dot", color="yellow", id="connection_status"),
                dmc.Button("Connect to Server", id="vnc_connect", w=200),
                dmc.PasswordInput(label="Server Password", w=200, id="server_password",placeholder="Server password", required=True),
            ])
        ]
    )

这是我当前的目录结构

├── poetry.lock
├── pyproject.toml
└── website
    ├── __init__.py
    ├── __main__.py
    ├── assets
    │   └── js
    │       └── callbacks.js
    ├── callbacks.py
    └── layout.py

重新加载页面时，错误并不总是 100% 持续存在，但持续时间足以在客户端造成麻烦。

我的问题似乎与这个问题有点相似。当像这样直接在回调中嵌入 javascript 时，效果会更好。

def get_callbacks(app):
    app.clientside_callback(
        """
        function(value) {
            alert("asd");
        }
        """,
        Output('connection_status', 'color'),
        Input('vnc_connect', 'n_clicks')
    )

但是为什么他在尝试将 javascriot 放入

undefined

文件时得到

js

却没有得到解答。

经过一番挖掘，我发现当将 javascript 放入文件中并且它确实工作时，它会在这里看到，而当它不起作用时，它就不会被看到。

为什么我需要的js文件有时出现，有时不出现？我该如何解决它？

Answer 1

为什么我需要的js文件有时出现，有时不出现？

这个我无法回答。但我可以回答问题的下一部分。

我该如何解决它？

我只希望

callbacks.js

文件在页面加载时运行，我最终只将该文件放在

assets

目录中，并将所有其他

js

文件放在新目录

/static

中。这意味着目录结构已更改为以下

├── poetry.lock
├── pyproject.toml
└── website
    ├── __init__.py
    ├── __main__.py
    ├── static
    │   └── script1.js
    ├── assets
    │   └── js
    │       └── callbacks.js
    ├── callbacks.py
    └── layout.py

这样，callback.js 始终在页面加载时运行，并且所有其他文件都保持不变。