React Autocomplete出现useAutocomplete filter未定义及Lint报错

触发报错的核心原因 #

• React useState用法完全错误：useState(初始值)返回一个二元数组，第一项是当前状态值，第二项是状态更新函数。之前的代码直接把整个返回数组赋值给常量，还尝试对const声明的变量直接重新赋值，既违反const变量不可重新赋值的语法规则，也触发了lint层面的“Expected an assignment or function call and instead saw an expression”报错。
• 数据收集逻辑存在缺陷：Firebase的异步查询循环里，每遍历一条文档就把mitarbeiter变量覆盖为单条文档的数组，最终根本拿不到全量员工数据集合；加上异步请求的执行时机晚于组件首次渲染，Autocomplete组件拿到的options属性是未初始化的undefined，组件内部需要对options执行数组filter操作，自然触发Cannot read property 'filter' of undefined报错。
• Autocomplete配置不符合API要求：
  • options属性强制要求传入数组结构，传入的非数组/未初始化值无法满足组件运行要求
  • getOptionLabel方法中读取的option.title在实际数据结构里不存在
  • onChange方法参数读取错误：Autocomplete的onChange第二个参数才是选中的选项值，读取e.target.value无法拿到正确的选中结果

修正后的实现步骤 #

1. 正确声明存储员工列表的状态，初始值设为空数组：
   const [mitarbeiterListe, setMitarbeiterListe] = useState([]);
2. 在组件的useEffect钩子中执行Firebase查询，先把全量文档收集到临时数组，所有遍历完成后再通过状态更新函数同步数据，避免循环覆盖值的问题：

   useEffect(() => {
     db.collection("Mitarbeiter").get().then((querySnapshot) => {
       const tempStaffList = [];
       querySnapshot.forEach((doc) => {
         // 整合文档id和文档内容为标准对象，方便组件取值
         tempStaffList.push({
           id: doc.id,
           ...doc.data()
         })
       });
       // 全量数据收集完成后更新状态，触发组件重渲染
       setMitarbeiterListe(tempStaffList)
     })
   }, [])
   

3. 调整Autocomplete组件配置，匹配实际数据结构：

   <Autocomplete
     id="combo-box-demo"
     options={mitarbeiterListe}
     onChange={(e, selectedValue) => setMit(selectedValue)}
     getOptionLabel={(option) => option.name || option.id}
     style={{ width: 350 }}
     renderInput={(params) => <TextField {...params} label="Mitarbeiter" variant="outlined" />}
   />
   

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