Реагируйте - как получить массив из хранилища перед первым рендерингом и использовать его как набор данных для ChartJS - PullRequest
Новая
       24

Реагируйте - как получить массив из хранилища перед первым рендерингом и использовать его как набор данных для ChartJS

0 голосов
/ 03 июня 2019

Я реализовал свой собственный метод для обработки события щелчка по метке диаграммы (библиотека React ChartJS 2), и он предназначен для фильтрации данных. У меня есть небольшая проблема, потому что я сохраняю состояние фильтров для конкретного пользователя, поэтому сначала, когда я инициализирую представление с этой диаграммой, я должен получить массив с реальными фильтрами. Проблема в том, что даже когда я получаю этот массив, я не могу использовать его в своем методе, потому что он всегда неопределен. Что важно - каждый раз, когда я добавляю новый фильтр, я также отправляю массив фильтров для хранения. Я довольно новичок в React, поэтому ваши советы будут очень кстати.

Это часть моего кода (может, componentDidMount не является хорошим выбором?): 

    constructor(props) {
    super(props);
    this.state = {
        itemsArray: []
    };
}

componentDidMount(): void {
    // Overview doughnut chart filtering
    AppStore.instance.select(selectQuickQueryParams).pipe(takeUntil(this.componentDestroyed$)).subscribe((quickQueryParam: QueryParamListState) => {
        this.setState({itemsArray: quickQueryParam.entities['Connection:NOT IN:connectionType:QuickFiltersComponent'] ? quickQueryParam.entities['Connection:NOT IN:connectionType:QuickFiltersComponent'].value : []})
    });

    const originalDoughnutLegendBehavior = Chart.defaults.doughnut.legend.onClick;
        Chart.defaults.doughnut.legend.onClick = function (e, legendItem) {
            if (!legendItem.hidden) {
                if (!this.state.itemsArray.includes(legendItem.text)) {
                    this.state.itemsArray.push(legendItem.text);
                }
                const query = new QueryParam(EQueryEntity.Connection, 'connectionType', this.itemsArray, EQueryOperator.NotIn, 'QuickFiltersComponent');
                AppStore.instance.dispatch(new AddQuickQueryParamsAction([query]));
                AppStore.instance.dispatch(new GetUpdateQuickFilters(true));
            } else {
                if (this.state.itemsArray.length > 1) {
                    for (let i = this.state.itemsArray.length; i >= 0; i--) {
                        if (this.state.itemsArray[i] === legendItem.text) {
                            this.state.itemsArray.splice(i, 1);
                            break;
                        }
                    }
                    const query = new QueryParam(EQueryEntity.Connection, 'connectionType', this.itemsArray, EQueryOperator.NotIn, 'QuickFiltersComponent');
                    AppStore.instance.dispatch(new AddQuickQueryParamsAction([query]));
                    AppStore.instance.dispatch(new GetUpdateQuickFilters(true));
                } else {
                    AppStore.instance.dispatch(new ClearQuickQueryParamsAction());
                }
            }
            originalDoughnutLegendBehavior.call(this, e, legendItem);
    };
}

1 Ответ

0 голосов
/ 03 июня 2019

вы можете использовать метод componentDidMount только для извлечения списка, а затем в методе componentDidUpdate вы можете обновить этот список с помощью фильтра, и он будет повторно отображать ваш компонент с последними данными.

...