Диаграмма и опора

Question

Мне нужно отобразить график, который разделен на годы и месяцы.В начале я создал 12 реквизитов с месяцами (следующий код), 2 реквизита за годы и создал график.

        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 году, например, отсчет временимесяцы начинаются с сентября по декабрь, а в 2019 году остается только январь.Более того, когда я беру данные для расписания, я сосредотачиваюсь на месяце, выбранном пользователем, подставляя его в запрос.

это также не будет проблемой, если бы не одно: я неНе нужно отображать элементы, которых нет в этом году (например, если пользователь выбрал 2019 год, мне нужно только показать январь), я хотел бы отменить все месяцы с сентября по декабрь 2018 года, а для 2019 года отобразитькаждый месяц, как только он заканчивается (например, февраль появится только 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}
    )
  }
}

Вы будете отображать только те кнопки, которые подключаются напрямую.в вашем штате и будет обрабатывать только те месяцы, которые у вас есть в штате.Надеюсь, это поможет ответить на ваш вопрос.