javascript - react JS : Populating a rsuite dropdown from a json object

Question

我使用 rsuite ui 下拉组件 here is the Component Docs 拥有此组件这应该从组件状态中保存的 json 填充其元素，但每当我尝试单击任一下拉菜单时，我都会收到此错误。

ERROR: VM7492:37 Warning: React DevTools encountered an error: TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' | property '_context' -> object with constructor 'Object' --- property 'Provider' closes the circle

代码:

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

那是因为您没有以正确的方式传递数据。它应该是 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"},
]

希望这项工作适合您。