Plotly-Dash 如何使用 dcc.Input 将输入作为 JSON 序列化变量传递？

Question

大家好，我正在尝试为我的爬虫应用程序构建一个界面，但我很难将用户输入传递给一个变量不是 JSON 可序列化的。我也收到此回调错误：

引发异常。InvalidCallbackReturnValue( dash.exceptions.InvalidCallbackReturnValue：<Output output-submit.children> 的回调 返回类型为tuple 的值 这不是 JSON 可序列化的。 有问题的值是唯一返回的值， 或在返回列表的顶层， 并具有字符串表示 (<function CSV at 0x11e00a430>, <function pages at 0x104cf4160>, <function url at 0x11e004550>) 一般来说，Dash 属性只能是 破折号组件，字符串，字典，数字，无， 或这些列表。

如果您愿意，这是我的代码！我很感激能得到任何帮助。

app.layout = html.Div([
    html.Div(
        html.Header(
            html.H1("Price Scraper")
        )
    ),
    html.Div(children=[
        html.Label(' address:'),
        dcc.Input(
            id='input-url',
            placeholder='Input Address',
            type="text",
            style={"width": "25%"}
        ),
        html.Div(id='output-url'),
        # ____________________________#
        html.Label('How many pages to scrape:'),
        dcc.Input(
            id='input-pages',
            placeholder='Input or choose pages to scrape',
            type="number",
            min="0"
        ),
        html.Div(id='output-pages'),
        # -----------------------------#
        html.Label('CSV Filename:'),
        dcc.Input(
            id='input-csv',
            placeholder='Input filename ending in .csv',
            type="text"
        ),
        html.Div(id='output-csv'),
        # ------------------------------#
        html.Button('submit',
                    id='input-submit'),
        html.Div(id='output-submit',
                 children='Click the button to run program'),
    ]),
])


@app.callback(
    Output(component_id='output-url', component_property='children'),
    [Input(component_id='input-url', component_property='value')]
)
def url(input_value):
    url = str(input_value)



# ---------------#
@app.callback(
    Output(component_id='output-pages', component_property='children'),
    [Input(component_id='input-pages', component_property='value')]
)
def pages(input_value):
    pages = str(input_value)



# ---------------#
@app.callback(
    Output(component_id='output-csv', component_property='children'),
    [Input(component_id='input-csv', component_property='value')]
)
def CSV(input_value):
    CSV = str(input_value)





#---------------#
@app.callback(
    Output(component_id='output-submit', component_property='children'),
    [Input(component_id='input-submit', component_property='n_clicks')]
)

def run_script(n_clicks):
    if n_clicks:
        print(CSV, pages, url)
# ---------------#
if __name__ == "__main__":
     app.run(debug=True)

Answer 1

两个问题。

1. 您的回调不是returning 任何值。他们需要这样做才能正常工作。
2. 您的最后一个回调尝试使用超出范围的值（CSV、pages, and url). Think of each callback func as completely independent of the others, because they cannot reach into different ones and use those values. In order to use a value in a callback func, you need to pass it in as an InputorState`，或使用全局变量（不推荐）。

这是我将如何更改这些函数（我没有尝试过运行它，但我想你会明白的）。

@app.callback(
    Output(component_id='output-url', component_property='children'),
    [Input(component_id='input-url', component_property='value')]
)
def url(input_value):
    return str(input_value)


# ---------------#
@app.callback(
    Output(component_id='output-pages', component_property='children'),
    [Input(component_id='input-pages', component_property='value')]
)
def pages(input_value):
    return str(input_value)


# ---------------#
@app.callback(
    Output(component_id='output-csv', component_property='children'),
    [Input(component_id='input-csv', component_property='value')]
)
def CSV(input_value):
    return str(input_value)


#---------------#
@app.callback(
    Output(component_id='output-submit', component_property='children'),
    [Input(component_id='input-submit', component_property='n_clicks')],
    [State(component_id='output-url', component_property='children'),
     State(component_id='output-pages', component_property='children'),
     State(component_id='output-csv', component_property='children'),
    ]
)

def run_script(n_clicks, url, pages, CSV):
    if n_clicks:
        return [CSV, pages, url]
    else:
        raise dash.exceptions.PreventUpdate

您甚至可以跳过前 3 个回调函数并将所有内容连接到第 4 个回调函数，但我希望这显示了如何将各种回调函数关联在一起。