Javascript React JS：从json对象填充rsuite下拉列表

我想让这个组件使用rsuiteui下拉组件，该组件应该从组件状态中保存的json填充其元素，但是每当我尝试单击任何一个下拉列表时，我都会遇到这个错误

错误： VM7492:37警告：React DevTools遇到错误：TypeError:将循环结构转换为JSON -->从构造函数为“object”的对象开始 |属性'\u 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;

从“React”导入React；
从'rsuite'导入{SelectPicker}；
类TimeSelector扩展了React.Component{
构造函数（）{
超级（）；
此.state={
开始时间：[
{“开始时间”：“12:00 AM”，“开始id”：“AM-0”}，
{“开始时间”：“01:00 AM”，“开始id”：“AM-1”}，
{“开始时间”：“凌晨02:00”，“开始id”：“凌晨2点”}，
{“开始时间”：“03:00 AM”，“开始id”：“AM-3”}，
{“开始时间”：“04:00 AM”，“开始id”：“AM-4”}，
{“开始时间”：“05:00 AM”，“开始id”：“AM-5”}，
{“开始时间”：“06:00 AM”，“开始id”：“AM-6”}，
{“开始时间”：“上午7:00”，“开始id”：“上午7:00”}，
{“开始时间”：“上午8:00”，“开始id”：“上午8:00”}，
{“开始时间”：“09:00 AM”，“开始id”：“AM-9”}，
{“开始时间”：“上午10:00”，“开始id”：“上午10:00”}，
{“开始时间”：“上午11:00”，“开始id”：“上午11:00”}，
{“开始时间”：“下午12:00”，“开始id”：“下午0点”}，
{“开始时间”：“下午1:00”，“开始id”：“下午1点”}，
{“开始时间”：“下午2:00”，“开始id”：“下午2点”}，
{“开始时间”：“下午3:00”，“开始id”：“下午3点”}，
{“开始时间”：“下午4:00”，“开始id”：“下午4点”}，
{“开始时间”：“下午5:00”，“开始id”：“下午5点”}，
{“开始时间”：“下午6点”，“开始id”：“下午6点”}，
{“开始时间”：“下午7:00”，“开始id”：“下午7点”}，
{“开始时间”：“晚上8:00”，“开始id”：“下午8:00”}，
{“开始时间”：“9:00 PM”，“开始id”：“PM-9”}，
{“开始时间”：“晚上10:00”，“开始id”：“下午10:00”}，
{“开始时间”：“晚上11:00”，“开始id”：“下午11:00”}，
{“开始时间”：“下午12:00”，“开始id”：“下午12:00”}
],
结束时间：[
{“结束时间”：“12:00 AM”，“结束id”：“AM-0”}，
{“结束时间”：“01:00 AM”，“结束id”：“AM-2”}，
{“结束时间”：“凌晨02:00”，“结束id”：“上午3点”}，
{“结束时间”：“03:00 AM”，“结束id”：“AM-4”}，
{“结束时间”：“凌晨04:00”，“结束id”：“上午5点”}，
{“结束时间”：“05:00 AM”，“结束id”：“AM-5”}，
{“结束时间”：“06:00 AM”，“结束id”：“AM-6”}，
{“结束时间”：“上午7:00”，“结束id”：“上午7:00”}，
{“结束时间”：“上午8:00”，“结束id”：“上午8:00”}，
{“结束时间”：“09:00 AM”，“结束id”：“AM-9”}，
{“结束时间”：“上午10:00”，“结束id”：“上午10:00”}，
{“结束时间”：“上午11:00”，“结束id”：“上午11:00”}，
{“结束时间”：“下午12:00”，“结束id”：“下午0点”}，
{“结束时间”：“下午1点”，“结束id”：“下午1点”}，
{“结束时间”：“下午2点”，“结束id”：“下午2点”}，
{“结束时间”：“下午3点”，“结束id”：“下午3点”}，
{“结束时间”：“下午4点”，“结束id”：“下午4点”}，
{“结束时间”：“下午5点”，“结束id”：“下午5点”}，
{“结束时间”：“下午6点”，“结束id”：“下午6点”}，
{“结束时间”：“下午7点”，“结束id”：“下午7点”}，
{“结束时间”：“晚上8点”，“结束id”：“下午8点”}，
{“结束时间”：“晚上9点”，“结束id”：“下午9点”}，
{“结束时间”：“晚上10:00”，“结束id”：“下午10:00”}，
{“结束时间”：“晚上11:00”，“结束id”：“下午11:00”}，
{“结束时间”：“下午12:00”，“结束id”：“下午12:00”}
],  
已选择开始时间：“”，
selectedEndTime:“”，
};
}
render（）{
返回(
开始时间：
结束时间：
);
}
componentDidMount（）{
}
}
导出默认时间选择器；

---

我已经检查过json对象了。

这是因为您没有正确地传递

数据。它应该是包含以下内容的
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={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,
})}

在我的例子中，发生在我身上的是，我想从一个API获取数据，但我得到了相同的错误。特定的解决方案告诉您相同的类型脚本：）您只需在发送到自动完成的属性中键入一个类型，这里我向您展示我的代码

type DataItemType = {
    label: string; 
};


export const useGetCityApi = () => {

    const [city, setCity] = useState<DataItemType[]>([]);

    useEffect(() => {
        getCitysApi.get<GetCityAPIType>('/locations?term=PRG&location_types=airport')
                   .then( resp =>{
                      setCity([{
                          label:resp.data.locations[0].city.name  
                      }]);
                   })
                   .catch(console.log); 
    }, [])    

    return city;
}

type数据项类型={
标签：字符串；
};
导出常量useGetCityApi=（）=>{
const[city，setCity]=useState（[]）；
useffect（（）=>{
getCitysApi.get（'/locations？term=PRG&location\u types=airport'）
。然后（resp=>{
塞西蒂([{
标签：resp.data.locations[0].city.name
}]);
})
.catch（console.log）；
}, [])    
回归城市；
}

您可以看到，在useState中引入特定的DataItemType类型后，我如何指示要处理该钩子的数据类型。在另一个组件中，我将return分配给一个变量，并将其添加到Autocomplete中

type DataItemType = {
    label: string; 
};


export const useGetCityApi = () => {

    const [city, setCity] = useState<DataItemType[]>([]);

    useEffect(() => {
        getCitysApi.get<GetCityAPIType>('/locations?term=PRG&location_types=airport')
                   .then( resp =>{
                      setCity([{
                          label:resp.data.locations[0].city.name  
                      }]);
                   })
                   .catch(console.log); 
    }, [])    

    return city;
}