Plotly破折号模式匹配回调无法正常工作

Question

下面是我一直试图从plotly dash的“模式匹配回调示例页面”运行的一些示例代码。在我的一生中，我看不出哪里出了问题——我在浏览器中遇到的唯一错误是语法错误——JSON输入的意外结束。我可以看到，只有当我尝试使用模式匹配语法注册最后一个回调时，问题才会出现。如果有帮助的话，我正在使用DjangoDash，所以我可以将dash与Django集成。我的代码如下：谢谢

import dash
import dash_core_components as dcc
import dash_html_components as html
from django_plotly_dash import DjangoDash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State, MATCH, ALL
from dash.exceptions import PreventUpdate
from django_dash.app import app



layout = html.Div([
    dbc.Button("Add Filter", id="dynamic-add-filter", n_clicks=0),
    html.Div(id='dynamic-dropdown-container', children=[]),
])



@app.callback(
    Output('dynamic-dropdown-container', 'children'),
    [Input('dynamic-add-filter', 'n_clicks')],
    [State('dynamic-dropdown-container', 'children')]
)
def display_dropdowns(n_clicks, children):
    new_element = html.Div([
        dcc.Dropdown(
            id={
                'type': 'dynamic-dropdown',
                'index': n_clicks
            },
            options=[{'label': i, 'value': i} for i in ['NYC', 'MTL', 'LA', 'TOKYO']]
        ),
        html.Div(
            id={
                'type': 'dynamic-output',
                'index': n_clicks
            }
        )
    ])
    children.append(new_element)
    return children



@app.callback(
    Output({'type': 'dynamic-output', 'index': MATCH}, 'children'),
    [Input({'type': 'dynamic-dropdown', 'index': MATCH}, 'value')],
    [State({'type': 'dynamic-dropdown', 'index': MATCH}, 'id')]
)
def display_output(value, id):
    return html.Div('Dropdown {} = {}'.format(id['index'], value))

Chrome中的Javascript控制台错误：

dash_renderer.min.js:20 SyntaxError: Unexpected end of JSON input
    at dash_renderer.min.js:20
Gn @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
li @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
za @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
za @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
za @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
dispatch @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
Ho @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
value @ dash_renderer.min.js:20
value @ Location.react.js:104
value @ dash_bootstrap_components.min.js:31
onClick @ dash_bootstrap_components.min.js:31
ki @ react-dom.production.min.js:176
ji @ react-dom.production.min.js:13
mi @ react-dom.production.min.js:13
lf @ react-dom.production.min.js:13
wi @ react-dom.production.min.js:187
Kd @ react-dom.production.min.js:32
pc @ react-dom.production.min.js:32
Wf @ react-dom.production.min.js:34
(anonymous) @ react-dom.production.min.js:236
uf @ react-dom.production.min.js:15
Qd @ react-dom.production.min.js:42
sc @ react-dom.production.min.js:41
unstable_runWithPriority @ react.production.min.js:25
Da @ react-dom.production.min.js:60
mk.Events.current @ react-dom.production.min.js:236
Ei @ react-dom.production.min.js:41
Show 152 more frames