Javascript 选择值标签

我的状态只有id可加载选择

//ComponentDidMount method
let countries_data = await axios.get('/api/v1/countries/');
countries_data.data.map((data) => {
  countries.push(<Option key={data.id}>{data.name}</Option>);
});
//My Options are a Option Component

//Render method
<Select 
 showSearch
 placeholder={'Country'}
 size={"large"}
 value={this.state.country_id} //Should show the text from option selected
 onChange={this.onChangeCountry}
 filterOption={(input, option) =>
     option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
     {countries}
 </Select>

//ComponentDidMount方法
让countries_data=wait axios.get（'/api/v1/countries/'）；
国家数据.数据.地图（（数据）=>{
push（{data.name}）；
});
//我的选项是一个选项组件
//渲染方法
option.props.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0}>
{国家}

---

这里的主要问题是我用一个整数设置了value选项，选择将显示数字，如27，40，但没有国家标签，如国家a，国家B，等等。我这里的问题是如何设置一个值，将该值设置为整数，并显示从我的国家/地区数组中选择的选项？

您需要将

值

属性添加到

countries\u data.data.map（（数据）=>{
push（{data.name}）；
//                                     ^^^^^^^^^^^^^^^
});

请参阅，属性

title

在选择此选项后设置

选择

的标题

此外，为什么要使用没有返回值的

映射

？用于此情况

countries\u data.data.forEach（（数据）=>{
push（{data.name}）；
});

重新加载时仍显示data.id而不是data.name

countries_data.data.map((data) => {
  countries.push(<Option key={data.id} value={data.id}> {data.name} </Option>);
//                                     ^^^^^^^^^^^^^^^
});