如何从 select 中获取姓名和 ID

Question

我用react hooks做了一个select，目前只能取id，不能取name。

select代码：

const [countries, setCountries] = useState([]);
const [selectedCountry, setSelectedCountry] = useState(0);
useEffect(() => {
  CountryGet().then(result => { setCountries(result); });
  }, []);

const onChangeCountry = e => {
    setSelectedCountry(e.target.value);   
  }

<FormControl className={classes.formControl}>
                  <InputLabel id="country_label">Country</InputLabel>
                  <Select id="country" value={selectedCountry} onChange={onChangeCountry}>
                    {countries.map((country) => (
                      <MenuItem  key={country.id} value={country.id}>
                        {country.countryName}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>

我希望在 selectCountry 中有 Id 和名称，但到目前为止我只得到 id。 如何从 select 中获取名称？

Answer 1

我猜 useState 中的默认值是错误的。 你需要提供你的国家 object 的形状。我假设你的国家 object 看起来像

{
id:anumber,
countryName:"astring",
}

如果是这种情况，那么你应该做这样的事情

const [countries, setCountries] = useState([{id:0, countryName:""}]);
const [selectedCountry, setSelectedCountry] = useState({id:0, countryName:""});