db c .Toast заполняет неправильное свойство 'children' по истечении срока действия (Da sh)

Question

Я создал макет с вкладками для своего приложения Da sh:

import dash
import dash_table
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc



TAB_LAYOUT = html.Div([
    dcc.Tabs(id="tabs-main", value='tab-intro', children=[
        dcc.Tab(label='Introduction', value='tab-intro'),
        dcc.Tab(label='Your Files', value='tab-files'),
        dcc.Tab(label='Basic', value='tab-basic'),
...

app.layout = html.Div([
    TAB_LAYOUT,
...


# Top tabs callback
@app.callback(Output('tabs-content', 'children'),
              [Input('tabs-main', 'value')])
def render_content(tab):
    if tab == 'tab-intro':
        return tab_intro_layout
    elif tab == 'tab-basic':
        return tab_basic_layout
    elif tab == 'tab-files':
        return tab_files_layout
    ...

Теперь на вкладке «файлы» у меня есть компонент загрузки файла и при успешной операции над файлом (добавление, удаление) У меня есть dbc.Toast отчет о результате операции:

# files - update files table
@app.callback(
    [
        Output(component_id='upload-error-modal', component_property='style'),
        Output(component_id='upload-error-message', component_property='children'),
        Output(component_id='files-table', component_property='data'),
        Output(component_id='toast-div', component_property='children'),
        Output(component_id='upload-wait-div', component_property='children')
    ],
    [
        Input('session-id', 'children'),
        Input('upload-data', 'contents'),
        Input('upload-error-close-button', 'n_clicks'),
        Input('files-table', 'data_previous')
    ],
    [
        State('upload-data', 'filename'),
        State('files-table', 'data')
    ]
)
def update_files_table(session_id, upload_data_contents, error_close_button_nclicks,
                           data_previous, filename, data):
...
        if removed_filename:
            return {'display': 'none'}, '', data, make_toast_file_op(removed_filename, 'File removed.'), filename



def make_toast_file_op(filename, message):
    return dbc.Toast([html.P(filename, className="mb-0")],
                     header=message,
                     className='toast',
                     headerClassName='toast-header',
                     bodyClassName='toast-body',
                     duration=3500)

Теперь при загрузке или удалении файла отображается Toast, и он исчезает через 3,5 с.

Однако, если я переключаюсь на другую вкладку, скажем tab-basic до того, как тост исчезает , создается впечатление, что обновляется неправильный компонент, и это приводит к ошибке:

An object was provided as `children` instead of a component, string, or number (or list of those). Check the children property that looks something like:

Пока я не переключаюсь на другую вкладку и не жду, пока исчезнет тост, ошибки нет.

Подробное сообщение об ошибке (ниже), похоже, указывает на то, что это действительно макет tab-basic ( когда я переключился на эту вкладку, чтобы получить ошибку), а не макет tab-files.

Как я могу это исправить?

An object was provided as `children` instead of a component, string, or number (or list of those). Check the children property that looks something like:
{
  "0": {
    "props": {
      "children": [
        {
          "props": {
            "children": "Input Text"
          },
          "type": "H4",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "id": "basic-input-box",
            "style": {
              "width": "100%",
              "height": "400px"
            },
            "value": ""
          },
          "type": "Textarea",
          "namespace": "dash_core_components"
        },
        {
          "props": {
            "children": [
              {
                "props": {
                  "children": [
                    {
                      "props": {
                        "children": [
                          {
                            "props": {
                              "children": "Example Text"
                            },
                            "type": "Label",
                            "namespace": "dash_html_components"
                          },
                          {
                            "props": {
                              "id": "basic-example-text",
                              "options": [
                                {
                                  "label": "",
                                  "value": "empty"
                                },
                                {
                                  "label": "Example1",
                                  "value": "ex1"
                                },
                                {
                                  "label": "Example2",
                                  "value": "ex2"
                                },
                                {
                                  "label": "Example3",
                                  "value": "ex3"
                                }
                              ],
                              "value": "empty"
                            },
                            "type": "Dropdown",
                            "namespace": "dash_core_components"
                          }
                        ],
                        "style": {
                          "width": "75%",
                          "border-bottom": "0px"
                        }
                      },
                      "type": "Td",
                      "namespace": "dash_html_components"
                    }
                  ]
                },
                "type": "Tr",
                "namespace": "dash_html_components"
              }
            ],
            "style": {
              "width": "100%",
              "border-bottom": "0px"
            }
          },
          "type": "Table",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": null
          },
          "type": "Br",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": "Submit",
            "id": "basic-button"
          },
          "type": "Button",
          "namespace": "dash_html_components"
        }
      ],
      "style": {
        "width": "48%",
        "display": "inline-block"
      }
    },
    "type": "Div",
    "namespace": "dash_html_components"
  },
  "1": {
    "props": {
      "children": [
        {
          "props": {
            "children": "Examples of fundamental capabilities"
          },
          "type": "H4",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": "Example:",
            "style": {
              "color": "#eb7a34"
            }
          },
          "type": "P",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": null,
            "id": "basic-example1"
          },
          "type": "Div",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": null
          },
          "type": "Br",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": "Example",
            "style": {
              "color": "#eb7a34"
            }
          },
          "type": "P",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": null,
            "id": "basic-ex"
          },
          "type": "Div",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": null
          },
          "type": "Br",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": "Example",
            "style": {
              "color": "#eb7a34"
            }
          },
          "type": "P",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": null,
            "id": "basic-1"
          },
          "type": "Div",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": null
          },
          "type": "Br",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": "Example:",
            "style": {
              "color": "#eb7a34"
            }
          },
          "type": "P",
          "namespace": "dash_html_components"
        },
        {
          "props": {
            "children": null,
            "id": "basic-2"
          },
          "type": "Div",
          "namespace": "dash_html_components"
        }
      ],
      "style": {
        "width": "48%",
        "display": "inline-block",
        "float": "right"
      }
    },
    "type": "Div",
    "namespace": "dash_html_components"
  },
  "2": {
    "props": {
      "children": []
    },
    "type": "Div",
    "namespace": "dash_html_components"
  },
  "props": {
    "is_open": false,
    "n_dismiss": null,
    "n_dismiss_timestamp": 1584525204410
  }
}