Реакция JS: заполнение выпадающего из rsuite из объекта json

Question

У меня есть этот компонент, использующий выпадающий компонент rsuite ui. Вот Документы с компонентами , которые должны заполнять свои элементы из json, находящегося в состоянии компонента, но я продолжаю получать эту ошибку в любое время, когда я попробуйте щелкнуть любой из раскрывающихся списков.

ОШИБКА: VM7492: 37 Предупреждение: React DevTools обнаружил ошибку: TypeError: Преобразование круговой структуры в JSON -> начиная с объекта с конструктором 'Object '| свойство '_context' -> объект с конструктором 'Object' --- свойство 'Provider' закрывает круг

код:

import React from 'react';
import {SelectPicker } from 'rsuite';

class TimeSelector extends React.Component {
  constructor() {
    super();
    this.state = {
      start_time: [
             {"start_hour":"12:00 AM","start_id":"am-0"},
             {"start_hour":"01:00 AM","start_id":"am-1"},
             {"start_hour":"02:00 AM","start_id":"am-2"},
             {"start_hour":"03:00 AM","start_id":"am-3"},
             {"start_hour":"04:00 AM","start_id":"am-4"},
             {"start_hour":"05:00 AM","start_id":"am-5"},
             {"start_hour":"06:00 AM","start_id":"am-6"},
             {"start_hour":"07:00 AM","start_id":"am-7"},
             {"start_hour":"08:00 AM","start_id":"am-8"},
             {"start_hour":"09:00 AM","start_id":"am-9"},
             {"start_hour":"10:00 AM","start_id":"am-10"},
             {"start_hour":"11:00 AM","start_id":"am-11"},
             {"start_hour":"12:00 PM","start_id":"pm-0"},
             {"start_hour":"1:00 PM","start_id":"pm-1"},
             {"start_hour":"2:00 PM","start_id":"pm-2"},
             {"start_hour":"3:00 PM","start_id":"pm-3"},
             {"start_hour":"4:00 PM","start_id":"pm-4"},
             {"start_hour":"5:00 PM","start_id":"pm-5"},
             {"start_hour":"6:00 PM","start_id":"pm-6"},
             {"start_hour":"7:00 PM","start_id":"pm-7"},
             {"start_hour":"8:00 PM","start_id":"pm-8"},
             {"start_hour":"9:00 PM","start_id":"pm-9"},
             {"start_hour":"10:00 PM","start_id":"pm-10"},
             {"start_hour":"11:00 PM","start_id":"pm-11"},
             {"start_hour":"12:00 PM","start_id":"pm-12"}
      ],
      end_time:[
              {"end_hour":"12:00 AM","end_id":"am-0"},
              {"end_hour":"01:00 AM","end_id":"am-2"},
              {"end_hour":"02:00 AM","end_id":"am-3"},
              {"end_hour":"03:00 AM","end_id":"am-4"},
              {"end_hour":"04:00 AM","end_id":"am-5"},
              {"end_hour":"05:00 AM","end_id":"am-5"},
              {"end_hour":"06:00 AM","end_id":"am-6"},
              {"end_hour":"07:00 AM","end_id":"am-7"},
              {"end_hour":"08:00 AM","end_id":"am-8"},
              {"end_hour":"09:00 AM","end_id":"am-9"},
              {"end_hour":"10:00 AM","end_id":"am-10"},
              {"end_hour":"11:00 AM","end_id":"am-11"},
              {"end_hour":"12:00 PM","end_id":"pm-0"},
              {"end_hour":"1:00 PM","end_id":"pm-1"},
              {"end_hour":"2:00 PM","end_id":"pm-2"},
              {"end_hour":"3:00 PM","end_id":"pm-3"},
              {"end_hour":"4:00 PM","end_id":"pm-4"},
              {"end_hour":"5:00 PM","end_id":"pm-5"},
              {"end_hour":"6:00 PM","end_id":"pm-6"},
              {"end_hour":"7:00 PM","end_id":"pm-7"},
              {"end_hour":"8:00 PM","end_id":"pm-8"},
              {"end_hour":"9:00 PM","end_id":"pm-9"},
              {"end_hour":"10:00 PM","end_id":"pm-10"},
              {"end_hour":"11:00 PM","end_id":"pm-11"},
              {"end_hour":"12:00 PM","end_id":"pm-12"}
      ],  
      selectedStartTime:'',
      selectedEndTime:'',
    };


  }

  render() {

    return (
        <div>
            Start Time:
            <SelectPicker
                toggleComponentClass={Button}
                size="md"
                placeholder="12:00 AM"
                data={this.state.start_time}
                labelKey="start_hour"
                valueKey="start_id"
            />
            End Time:
            <SelectPicker
                toggleComponentClass={Button}
                size="md"
                placeholder={this.state.end_time[0].end_hour}
                data={this.state.end_time}
                labelKey="end_hour"
                valueKey="end_id"
            />    
        </div>
    );
  }

  componentDidMount() {

  }

}

export default TimeSelector;

я проверил json объект кажется нормальным.

Answer 1

Это потому, что вы не проходите data правильный путь. Это должен быть массив DataItemType, который содержит:

type DataItemType = {
  value: string; // property value is the value of valueKey 
  label: React.Node; // property value is the vaue of labelKey
  children?: Array<DataItemType>; // property value is the value of childrenKey
  groupBy?: string;
};

Вы можете попробовать передать это:

data = [
   {label:"12:00 AM", value:"am-0"},
   {label:"01:00 AM", value:"am-1"},
   {label:"02:00 AM", value:"am-2"},
]

Надеюсь, эта работа для вас.

Answer 2

В дополнение к Мухаммед Зеешан ответ: Вам необходимо преобразовать данные так, чтобы они соответствовали требуемому формату данных.

Для времени начала:

data={this.state.start_time.map(entry => ({
  label: entry.start_hour,
  value: entry.start_id,
})}

и на ваше время окончания:

data={this.state.end_time.map(entry => ({
  label: entry.end_hour,
  value: entry.end_id,
})}