AutoComplete Material UI 不会根据 inputValue 过滤选项

Question

我正在尝试使用 mui 实现自动完成字段，其选项将根据全局搜索而更改，无论根据全局搜索过滤的数据如何，它们的描述都会设置为自动完成的选项。问题是当我在文本区域中输入某些内容时，选项不会根据输入值减少/过滤。当我使用静态数据（optionsh）时，不会发生此问题。如何解决这个问题？这里的descriptionOptions是一个字符串数组，就像optionsh

useEffect(() => {
    let filteredData = //filter logic returns array of objects
    setFilteredData(filteredData);
  }, [searchInput]);
 const optionsh = [ "hi", "bye", "hohho"];
 const descriptionOptions = filteredData?.map(item => item.activityDescription) ?? [];
  const handleDescriptionFilterText = (value) => {
    setDescriptionSearchText(value);
  }

  <Autocomplete 
    options={descriptionOptions}
    size="small"
    renderInput={(params) => 
    <TextField {...params} 
      onChange={(event) => handleDescriptionFilterText(event.target.value)}
      sx={{
        width: '200px',   
        height: '10px',  
        '& .MuiInputBase-root': {
          height: '40px',    
          padding: '8px',
        } 
      }}
    />
  }
  />

我希望选项在文本区域搜索中进行过滤，我尝试使用选项的状态并在输入值发生变化时更新它，选项状态正在更新但没有反映在用户界面中

  // useEffect(() => {
  //   if(!descriptionSearchText){
  //     setDescriptionOptions(filteredData.map(item => item.activityDescription))
  //   }else {
  //     const options = filteredData.map(item => item.activityDescription).filter( option => option.toLowerCase().includes(descriptionSearchText.toLowerCase()));
  //     setDescriptionOptions(options)
  //   }
  // },[descriptionSearchText, filteredData])

Answer 1

不要为

filteredData

定义状态，而是使用局部变量并删除 useEffect，如下所示：

const filteredData = useMemo(()=>  //filter logic returns array of objects,[searchInput]);


 const optionsh = [ "hi", "bye", "hohho"];
 const descriptionOptions = filteredData?.map(item => item.activityDescription) ?? [];
  const handleDescriptionFilterText = (value) => {
    setDescriptionSearchText(value);
  }

  <Autocomplete 
    options={descriptionOptions}
    size="small"
    renderInput={(params) => 
    <TextField {...params} 
      onChange={(event) => handleDescriptionFilterText(event.target.value)}
      sx={{
        width: '200px',   
        height: '10px',  
        '& .MuiInputBase-root': {
          height: '40px',    
          padding: '8px',
        } 
      }}
    />
  }
  />

如果问题仍然存在，请分享您的过滤器逻辑，也许问题就在那里。