我正在映射对象数组,并在带有semantic-ui-react的下拉选择中使用名称。
我有一些模拟数据
mock.onGet("/dataschemas").reply(200, {
data: [
{
id: "2147483599",
selfUri: "/dataschemas/2147483599",
name: "Book Catalog"
},
{
id: "2147483600",
selfUri: "/dataschemas/2147483600",
name: "Business Articles"
}
]
});
在cDM中,我正在使用对象dataschemas
async componentDidMount() {
await this.getSchemas();
}
getSchemas = async () => {
try {
const { data } = await axios.get("/dataschemas");
console.log(data);
const dataschemas = data.data;
this.setState({ dataschemas: dataschemas });
console.log("This is the dataschema list:", dataschemas);
} catch (error) {
console.error(Error(`Error fetching results list: ${error.message}`));
}
};
我的变更处理程序函数如下:
handleSchemaChange = (e, { value }) => this.setState({ name: value });
然后在渲染中,我正在使用<Dropdown>
组件
render() {
const { dataschemas } = this.state;
return (
<div>
<div>
<label>Select a dataschema: </label>
<Dropdown
placeholder="Select data schema"
clearable
fluid
selection
multiple={true}
options={dataschemas}
header="PLEASE SELECT A DATASCHEMA"
value={dataschemas.filter(({ name }) => name === this.state.name)}
onChange={this.handleSchemaChange}
/>
</div>
</div>
);
}
做出选择时,我无法使数据模式names
出现在下拉列表中,也无法使标签更新。我不知道我是否缺少道具或没有正确更新状态,有什么想法吗?
Codesandbox here
答案 0 :(得分:2)
如https://react.semantic-ui.com/modules/dropdown/中所述,您应使用以下结构在下拉菜单中显示对象。
{
"key": "",
"text": "",
"value": ""
}
示例:在下拉列表中将此值用作选项值
options={dataschemas.map(ds => {
return {
key: ds.id,
text: ds.name,
value: ds.selfUri
}
})}