时间戳

首页 > 解决方案 > Plotly-Dash 如何使用 dcc.Input 将输入作为 JSON 序列化变量传递？

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

问题描述

大家好，我正在尝试为我的爬虫应用程序构建一个接口，我很难将用户输入传递给一个变量我已经尝试了所有方法并不断收到错误消息，即我的输入是Object of type function is not JSON serializable。我也收到此回调错误：

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

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

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)

标签： jsonpython-3.xplotly-dash

解决方案

两个问题。

  1. 您的回调没有return任何值。他们需要这样做才能正常工作。
  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 Input orState`，或使用全局变量（不推荐）。

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

@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 个回调函数，但我希望这显示了如何将各种回调函数联系在一起。

推荐阅读