使用Dash的dcc.Input组件获取输入时出现报错问题

核心错误原因及修复步骤 #

• 错误1：App实例创建错误
  你导入了JupyterDash但仍使用dash.Dash()创建应用，Jupyter环境下必须用JupyterDash初始化，否则会出现运行错误。
  修正：将app = Dash(__name__)改为app = JupyterDash(__name__)

• 错误2：回调依赖未导入
  回调中使用的Input和Output没有从dash.dependencies模块导入，这会导致名称未定义报错。
  修正：添加导入语句from dash.dependencies import Input, Output

• 错误3：代码缩进不符合Python规范
  原代码中app.layout、@app.callback装饰器、cb_render函数、if __name__ == "__main__"块都存在缩进错误，Python对缩进要求严格，必须统一缩进级别（建议用4个空格）。

• 关于开发服务器警告
  这条警告是正常提示，说明当前使用的是Dash内置的开发服务器，仅用于开发调试，生产部署时需要更换为Gunicorn、uWSGI等专业WSGI服务器，开发阶段可以忽略该警告。

修正后的完整代码 #

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output  # 新增导入
from jupyter_dash import JupyterDash

ALLOWED_TYPES = (
    "text", "number", "password", "email", "search",
    "tel", "url", "range", "hidden",
)

# 用JupyterDash创建app实例
app = JupyterDash(__name__)

app.layout = html.Div(
    [
        dcc.Input(
            id="input_{}".format(_),
            type=_,
            placeholder="input type {}".format(_),
        )
        for _ in ALLOWED_TYPES
    ]
    + [html.Div(id="out-all-types")]
)


@app.callback(
    Output("out-all-types", "children"),
    [Input("input_{}".format(_), "value") for _ in ALLOWED_TYPES],
)
def cb_render(*vals):
    return " | ".join((str(val) for val in vals if val))


if __name__ == "__main__":
    app.run_server(port=8051)

内容的提问来源于stack exchange，提问作者Abdullah Imran