问题原因在于Ant Design的Select组件无法自动将动态数据绑定到组件中,需要手动将数据绑定到组件props中。以下是解决方法的代码示例:
import React, { Component } from 'react';
import { Select } from 'antd';
const Option = Select.Option;
class Example extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
// 向后端请求数据并将数据储存到state中
this.setState({
data: [
{
id: 1,
name: '选项1',
},
{
id: 2,
name: '选项2',
},
],
});
}
render() {
const { data } = this.state;
return (
);
}
}
在上面的代码示例中,我们首先在构造函数中定义了一个空数组来存储我们从后端获取到的数据。在组件挂载后,我们向后端请求数据并将其存储在状态中的data数组中。在组件的render函数中,我们使用map函数将数据映射为Option标签并返回到Select组件中,以此来渲染动态数据。