React - how to get array from store before first render and use it as dataset for ChartJS

Question

I've implemented my own method to handle click event at chart label (React ChartJS 2 library) and it's for filtering data. I have a little problem becouse I'm storing state of filters for specific user so at first, when I'm initializing view with that chart I have to get array with actual filters. The problem is that even when I'm getting this array, I can't use it in my method becouse it's always undefined. What is important - every time I'm adding new filter, i'm also sending array of filters to store. I'm pretty new in React so Your advices will be really welcome.

This is part of my code (mayby componentDidMount is not good choice?):

    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);
    };
}

Garry · Answer 1 · 2019-06-03T17:15:18.793

0

you can use componentDidMount method only to fetch the list and then in componentDidUpdate method you can update that list with the filter and it will re-render your component with the latest data.

edited Jun 03 '19 at 17:15

answered Jun 03 '19 at 17:11

Garry

536
1
5
11

You mean componentDidUpdate in both cases? – Dominik Z Jun 03 '19 at 17:14
Sorry that was a mistake, I have updated my answer. – Garry Jun 03 '19 at 17:15
Unfortunatly it didn't help. I'm still getting 'Uncaught TypeError: Cannot read property 'itemsArray' of undefined' when I want to click on label.. – Dominik Z Jun 03 '19 at 17:20
I am assuming you were using `this.state.itemsArray` or `const {itemsArray} = this.state;`. If still you have issues let me know I will write an example for you. – Garry Jun 03 '19 at 17:27
As You can see in my code, i'm using this.state.itemsArray and in this case I'm getting error all the time I click on chart label – Dominik Z Jun 03 '19 at 18:24

React - how to get array from store before first render and use it as dataset for ChartJS

1 Answers1