我使用 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 对象似乎没问题。
最佳答案
那是因为您没有以正确的方式传递数据。它应该是 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"},
]
希望这项工作适合您。
关于javascript - react JS : Populating a rsuite dropdown from a json object，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60227101/