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

Question

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

错误： VM7492:37 警告：React DevTools 遇到错误：TypeError: Converting circular structure to 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

就我而言，发生在我身上的事情是我想从 API 中获取数据，但我遇到了同样的错误。具体的解决方案告诉你相同的 TypeScript :) 你只需要输入你发送到 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;
}

您会看到，在我在 useState 中引入特定的 DataItemType 类型之后，我指示了要处理该挂钩的数据类型。在另一个组件中，我将返回值分配给一个变量并将其添加到自动完成

Answer 2

除了Muhammad Zeeshan回答：你需要对数据进行转换，使其匹配所需的数据格式。

开始时间：

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

Answer 3

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

希望这项工作适合你。