解决Autocomplete组件非受控转受控错误及预加载文档显示问题

核心问题分析 #

• 初始状态结构不匹配：初始employees设为数组，导致employees.employees为undefined，value和inputValue初始值为undefined，后续接口返回数据后变为有效值，触发非受控转受控警告。
• Value属性设置错误：Autocomplete的value应对应options中的完整员工对象，而非直接使用employees.employees.Name字符串，无法匹配选项导致加载时不显示姓名。
• 未同步已有文档数据：加载已有文档时，未将已选员工信息同步到组件状态，导致字段为空。

修复步骤 #

1. 修正初始状态结构 #

将employees初始状态改为符合接口返回的结构（假设接口返回{ employees: [] }），避免employees.employees为undefined：

const [employees, setEmployees] = useState({ employees: [] });

2. 分离选中值与选项列表 #

新增状态存储当前选中的员工对象，同时在组件挂载或已有文档数据更新时，匹配并设置选中值：

const [selectedEmployee, setSelectedEmployee] = useState(null);

// 加载已有文档时同步选中员工
useEffect(() => {
  if (badge && employees.employees.length > 0) {
    // 假设badge存储员工姓名，匹配对应的员工对象
    const matchedEmp = employees.employees.find(emp => emp.Name === badge);
    setSelectedEmployee(matchedEmp || null);
  }
}, [badge, employees.employees]);

3. 修正Autocomplete属性配置 #

• value绑定选中的员工对象，inputValue单独维护输入框文本状态
• 修正onInputChange参数（MUI Autocomplete的该回调接收(e, newInputValue)）
• 确保options始终为数组，避免报错

const [inputValue, setInputValue] = useState('');

// ...

<Autocomplete
  value={selectedEmployee}
  inputValue={inputValue}
  onChange={(e, newValue) => {
    setSelectedEmployee(newValue);
    onBadgeChange(e, newValue);
  }}
  onInputChange={(e, newInputValue) => {
    setInputValue(newInputValue);
    onNameChange(e);
  }}
  options={employees.employees || []}
  getOptionLabel={(option) => option.Name || ''}
  filterOptions={(x) => x}
  id={id || "Person"}
  renderInput={(params) => <TextField {...params} id={id || "Person"} label={label} variant="outlined" />}
/>

4. 优化搜索逻辑 #

处理输入为空的情况，同时添加错误捕获：

const onNameChange = async (e) => {
  e.preventDefault();
  const value = e.target.value;
  let url = `/api/employeesearch?taxonomyid=${taxonomyid}`;
  
  try {
    if (value) {
      url += `&search=${value}`;
      const resp = await fetch(url);
      const emp = await resp.json();
      setEmployees(resp.ok ? emp : { employees: [] });
    } else {
      // 输入为空时清空选项列表
      setEmployees({ employees: [] });
    }
  } catch (err) {
    console.error('员工搜索失败:', err);
    setEmployees({ employees: [] });
  }
};

关键注意点 #

• Autocomplete的value必须是options数组中的某一项（完整对象），不能是单独字符串，否则无法匹配显示。
• value初始值设为null，inputValue初始值设为空字符串，避免出现非受控转受控的警告。
• 加载已有文档时，必须从props中获取已选员工信息，匹配到对应的选项对象并设置到状态中，才能让Autocomplete正确显示内容。

内容的提问来源于stack exchange，提问作者Ciaran Crowley