Material-UI Autocomplete未显示所需数据及选中显示缩写问题求助

嘿，我来帮你搞定这两个入门级问题，都是Material-UI Autocomplete组件的常见小坑，别担心～

问题1：为什么第47行无法获取country.value？ #

Material-UI的Autocomplete组件的onChange回调和普通input的逻辑不一样！它的参数签名是(event, newValue, reason)，不是你习惯的event.target.value。这里的newValue才是你选中的完整国家对象（包含name和value属性），所以你之前的写法根本拿不到正确的值。

修改你的onCountryChange函数就好：

const onCountryChange = async (event, newValue) => {
  // 处理未选中任何选项的情况，默认回到worldwide
  const countryCode = newValue ? newValue.value : 'worldwide';
  setCountry(countryCode);
};

另外，你的country状态初始化建议改成字符串类型（因为存储单个国家代码，数组没必要）：

const [country, setCountry] = useState('worldwide');

问题2：选中后显示缩写，下拉时显示全名 #

要实现这个效果，我们需要分别控制下拉选项的显示和选中后输入框的显示：

1. 下拉列表显示全名：保持getOptionLabel={(country) => country.name}即可，这个属性用来定义下拉选项的文本。
2. 选中后显示缩写：需要自定义renderInput的输入框内容，当有选中值时显示缩写，否则显示默认提示。
3. 额外加上getOptionSelected属性，告诉组件如何判断两个选项是否为同一选中项，避免选中后出现异常。

修改后的Autocomplete完整代码如下：

<Autocomplete
  options={countries}
  // 下拉选项显示国家全名
  getOptionLabel={(country) => country.name}
  // 定义选项匹配规则，确保选中状态正确
  getOptionSelected={(option, value) => option.value === value.value}
  style={{ width: 200 }}
  onChange={onCountryChange}
  // 绑定当前选中的选项，让组件跟踪选中状态
  value={countries.find(c => c.value === country) || null}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Choose a Country"
      variant="outlined"
      placeholder="Choose a Country"
      // 自定义输入框显示内容：选中时显示缩写，否则保持默认输入值
      inputProps={{
        ...params.inputProps,
        value: country !== 'worldwide' ? country : params.inputProps.value,
      }}
    />
  )}
/>

完整修改后的App代码 #

import './App.css';
import {FormControl, TextField} from '@material-ui/core';
import React, { useState, useEffect} from "react";
import { Autocomplete } from '@material-ui/lab';

function App() {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState('worldwide');

  useEffect(() => {
    const getCountriesData = async() => {
      await fetch("https://disease.sh/v3/covid-19/countries")
      .then((response) => response.json())
      .then((data) => {
        const countries =data.map((country) => (
          { name: country.country, value: country.countryInfo.iso2 }
        ))
        setCountries(countries)
      })
    }
    getCountriesData()
  }, [])

  const onCountryChange = async (event, newValue) => {
    const countryCode = newValue ? newValue.value : 'worldwide';
    setCountry(countryCode);
  }

  return (
    <div className="App">
      <div className="app__header">
        <h1> Country names! </h1>
        <FormControl className="app__dropDown">
          <Autocomplete
            options={countries}
            getOptionLabel={(country) => country.name}
            getOptionSelected={(option, value) => option.value === value.value}
            style={{ width: 200 }}
            onChange={onCountryChange}
            value={countries.find(c => c.value === country) || null}
            renderInput={(params) => (
              <TextField
                {...params}
                label="Choose a Country"
                variant="outlined"
                placeholder="Choose a Country"
                inputProps={{
                  ...params.inputProps,
                  value: country !== 'worldwide' ? country : params.inputProps.value,
                }}
              />
            )}
          />
        </FormControl>
      </div>
    </div>
  );
}

export default App;

这样修改后，就能完美实现你要的效果：下拉列表显示国家全名，选中后输入框自动切换为对应缩写，同时也解决了onChange无法获取country.value的问题。

内容的提问来源于stack exchange，提问作者Hassan.sh