图表和道具状态

Question

我需要显示一个按年和月划分的图表。一开始我创建了 12 个带有月份的 props（如下代码），2 个 props 以年为单位并创建了一个时间表。


        this.state = {
            menu: [  //year
                {
                    key: 2018,
                    title: "2018",
                    opened: true,
                },
                {
                    key: 2019,
                    title: "2019",
                    opened: false
                }],
            active_menu: 2018, //key from opened (active) year
            info: [   //months with data
                {
                    key: 11,
                    title: 'December',
                    opened: true,
                    content: []
                },{
                    // other months
                }],
            active_month: 11 //key from opened (active) month
        }

现在有困难... 比如2018年从9月到12月开始倒计时，2019年只有1月。此外，当我为时间表获取数据时，我将重点放在用户选择的月份上，并将其代入查询中。

如果不是为了一件事，这也没有问题：我不需要显示年份中不存在的元素（例如，如果用户选择了2019年，我只需要show January)我想撤回2018年9月到12月的所有月份，2019年每个月一结束就显示（比如2月只会出现3月1日）

现在我完全明白，在当前的实现中，我无法实现必要的功能，但是我也不知道如何最好地做到这一点……请帮我提建议，我真的很郁闷

抱歉留言太长，没有人请教

Answer 1

这应该能让您了解如何构建数据。

首先，如果您的实际数据没有变化，您可以将其放入常规 const 中，稍后再参考。但我们将继续您现有的模式。

...
     active_menu: 2018, //key from opened (active) year
     info: [   //months with data
       {
         key: 11,
         title: 'December',
         opened: true,
         content: []
       },
       {
         // other months
       }
    ],
    active_month: 11 //key from opened (active) month

我们可以完全关注与您的月份有关的状态。只需用您实际需要的月份填充 this.state.info，您稍后就可以映射它们。

例如

class sampleComponent extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(index) {
    let copy = [...this.state.info]; //create local copy of state array
    let active = copy[index].key;
    this.setState({active_month: active});
  }


  render() {
    const buttons = this.state.info.map((month, index) => 
      <button onClick={() => handleClick(index)} key={month.key}/>
    );

    return (
      //return anything else here
      {buttons}
    )
  }
}

您只会呈现直接连接到您所在州的按钮，并且只会处理您在该州的月份。希望这有助于回答您的问题。

图表和道具状态

Chart and prop states

reactjs

react-props