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

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

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