无法读取 属性 'fantasy-land/map' 的未定义 Dash DataTable 正在使用下拉菜单更新 table

Question

我引用的是@chriddyp 在此处发布的示例代码片段 https://community.plot.ly/t/dash-datatable-updating-rows-with-dropdowns/6714 以及链接帖子中发生的讨论

可重现的例子

import flask
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd

from dash.dependencies import Input, Output, State


def create_dropdown_list(df, column):
    dd = df.loc[:, [column]].drop_duplicates().reset_index(drop=True)
    dd['label'] = dd[column]
    dd = dd.rename(columns={column:'value'}).to_dict(orient='records')
    return dd


city_temp = pd.DataFrame({'City':['Montreal','New York','San Francisco'], 
                          'Temperature':[68,83,66]})


server = flask.Flask(__name__)
app = dash.Dash(server=server, )

dropdown_list = create_dropdown_list(city_temp, 'City')

app.layout = html.Div([
    dcc.Dropdown(
        id='my-dropdown',
        options=dropdown_list, # which looks like [{'label': 'Montreal', 'value': 'Montreal'}, {'label': 'New York', 'value': 'New York'}, {'label': 'San Francisco', 'value': 'San Francisco'}]
        value = 'Montreal'
        ),
    html.H4(children='My table'),
    dt.DataTable(id='my-datatable')
])


@app.callback(Output('my-datatable', 'rows'), [Input('my-dropdown', 'value')])
def update_rows(selected_value):
    city_temp_sub = city_temp[city_temp.City == selected_value].reset_index(drop=True)
    return city_temp_sub.to_dict('records')

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

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

我在浏览器上得到 "Error loading dependencies" 在控制台上我收到错误 "TypeError: Cannot read property 'fantasy-land/map' of undefined"

有人可以帮忙吗？

谢谢

阿努杰

Answer 1

简答

Dash 的 DataTable 需要初始化为空 rows 才能正常工作。

dt.DataTable(id='my-datatable', rows=[{}])

长答案

将代码减少到最少有助于发现问题。

import flask
import dash
import dash_html_components as html
import dash_table_experiments as dt

server = flask.Flask(__name__)
app = dash.Dash(server=server, )

app.layout = html.Div([
    dt.DataTable(id='my-datatable', rows=[{}])
])

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

底层问题隐藏在源代码中： https://github.com/plotly/dash-table-experiments/blob/1e5b24eec53627418c51027f561cb7bae591a95e/dash_table_experiments/metadata.json

参数 rows 既不是 required，也没有默认值。

"rows": {
    "type": {
      "name": "arrayOf",
      "value": {
        "name": "custom",
        "raw": "PropTypes.shape"
      }
    },
    "required": false,
    "description": ""
  },