更改不相关的状态按钮时意外/非自愿地反应Context-API更改状态

Question

在上下文API状态下，存储的JSON对象在调用单独的事件处理程序时会自动更改，该事件处理程序旨在仅更改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]。仅当从月份切换到另一个时间间隔时才会发生这种情况。我们第一次渲染的默认状态是month。