Реагирование Context-API изменяет состояние неожиданно / невольно при изменении несвязанных кнопок состояния - PullRequest
Новая
       76

Реагирование Context-API изменяет состояние неожиданно / невольно при изменении несвязанных кнопок состояния

0 голосов
/ 20 сентября 2019

Сохраненный объект JSON в нашем контексте API-состояния невольно изменяется при вызове отдельного обработчика событий, предназначенного только для изменения фильтра на объекте JSON.Это только изменяет определенный набор данных в массиве объекта состояния.

Реагируют на сохраненные данные контекста следующим образом: 

  hpData: {
            day: { percentChange: '', data: [60], labels: [60] },
            week: { percentChange: '', data: [54], labels: [54] },
            month: { percentChange: '', data: [54], labels: [57] },
            year: { percentChange: '', data: [40], labels: [40] }
        }

Мы используем функцию setTimeRange, которая выбирает данные для их фильтрацииопределенный временной интервал. 

  setTimeRange = (event, value) => {
        this.setState({ timeRange: value });
    };

Базовая схема кода, который мы используем, выглядит следующим образом: 


import { withStyles } from '@material-ui/core/styles';

import { PortfolioContext } from '../Context/PortfolioContext';
import LineChartComponent from '../Charts/LineChartComponent';
import MakeTabs from './MakeTabs';

class Portfolio extends Component {
    state = {
        timeRange: 2, // 0 = day, 1 = week, 2 = month, 3 = year
        setTimeRange: this.setTimeRange
    };

    toTimeString = value => {
        let timeString = '';
        switch (value) {
            case 0:
                timeString = 'day';
                break;
            case 1:
                timeString = 'week';
                break;
            case 2:
                timeString = 'month';
                break;
            case 3:
                timeString = 'year';
                break;
            default:
                timeString = 'month';
        }
        return timeString;
    };

    setTimeRange = (event, value) => {
        this.setState({ timeRange: value });
    };

    render() {
        const { classes } = this.props;
        const { timeRange } = this.state;
        const timeString =
            this.toTimeString(timeRange)
                .charAt(0)
                .toUpperCase() + this.toTimeString(timeRange).substr(1);
        return (
            <PortfolioContext.Consumer>
                {context => {
                    const { hpData } = context.state;

                    const lineData = hpData[timeString.toLowerCase()].data
                        ? hpData[timeString.toLowerCase()].data
                        : null;
                    const lineLabels = hpData[timeString.toLowerCase()].labels
                        ? hpData[timeString.toLowerCase()].labels
                        : [];
                    const percentChange = hpData[timeString.toLowerCase()].percentChange
                        ? hpData[timeString.toLowerCase()].percentChange
                        : '';

                    return (
                        <React.Fragment>
                            <div>
                                <Grid container className={classes.root} direction='column' spacing={1}>
                                    <Grid item style={{ marginBottom: 8, height: 68, width: '100%' }}>
                                        <MakeTabs
                                            darkMode={darkMode}
                                            classes={classes}
                                            value={timeRange}
                                            setTimeRange={this.setTimeRange}
                                        />
                                    </Grid>
                                    <Grid item xs={12} md={6}>
                                        <LineChartComponent
                                            darkMode={darkMode}
                                            labels={lineLabels}
                                            data1={lineData}
                                            yAxisSymbol={'$'}
                                            title={
                                                timeString === 'Day'
                                                    ? 'Portfolio Value: Today'
                                                    : `Portfolio Value: ${timeString}`
                                            }
                                            pointSize={0}
                                            padding={[this.props.theme.spacing(2), this.props.theme.spacing(1)]}
                                            showTitle={true}
                                            xAxesTicks={true}
                                            aspectRatio={false}
                                            legendDisplay={false}
                                        />
                                    </Grid>
                                </Grid>
                            </div>
                        </React.Fragment>
                    );
                }}
            </PortfolioContext.Consumer>
        );
    }
}

export default withStyles(styles, { withTheme: true })(Portfolio);

В частности, у нас есть JSON метки диаграммы / набора данных, который находится в форме.

  hpData: {
            day: { percentChange: '', data: [60], labels: [60] },
            week: { percentChange: '', data: [54], labels: [54] },
            month: { percentChange: '', data: [57], labels: [57] },
            year: { percentChange: '', data: [40], labels: [40] }
        }

У нас есть обработчик событий, который выбирает между различными периодами времени в вышеуказанном объекте и отображает их на графике.Проблема заключается в том, что при выборе между, например, месяцем недели, массив data недели сохраняется в массиве data месяца.И приводит к следующему: 

  hpData: {
            day: { percentChange: '', data: [60], labels: [60] },
            week: { percentChange: '', data: [54], labels: [54] },
            month: { percentChange: '', data: [54], labels: [57] },
            year: { percentChange: '', data: [40], labels: [40] }
        }

Массив данных месяца был установлен на data[54] с data[57].Это происходит только при переключении с месяца на другой временной интервал.Наше состояние по умолчанию для первого рендера - месяц.

...