自动完成警告：您可以使用 `isOptionEqualToValue` 属性来自定义相等测试

Question

我正在努力消除这个警告

MUI: The value provided to Autocomplete is invalid.
None of the options match with `""`.
You can use the `isOptionEqualToValue` prop to customize the equality test. 

我浏览了很多 Stack Overflow，但没有用。我在这里缺少什么

const DropDownSearch = ({
  setSelectedValue,
  width = "auto",
  label = "",
  options = [],
  defaultSelectedValue = "",
}) => {
  console.log("🚀 DropDownInitiated ==", label);

  const selectedVendorCode = setSelectedValue;
  const [value, setValue] = useState(""); //selected value
  const [inputValue, setInputValue] = useState(""); //user typing value/ display text
  const [defaultValueIndex, setDefaultValueIndex] = useState(-1);

  useEffect(() => {
    // TODO: find default value index,
    // TODO: to make selection as defualtValue
    if (defaultSelectedValue.length > 0) {
      
      const findIndex = options.findIndex(
        (opt) => opt.value === defaultSelectedValue
      );
      console.log("findIndex =>>> ", findIndex);
      setDefaultValueIndex(findIndex);
    }
  }, [defaultSelectedValue]);

  useEffect(() => {
    // TODO: once "useState value" (user selected value) changed,
    // TODO: then send to parent component
    if(value){
      setSelectedValue?.(value);
    }
  }, [value]);

  const optionData = useMemo(() => {
    return options;
  }, [options]);


  const filterOptions = createFilterOptions({
    stringify: (option) => {
      return JSON.stringify(Object.values(option));
    },
  });

  return (
    <Autocomplete
      defaultValue={
        (defaultValueIndex >= 0) ? optionData[defaultValueIndex] : null
      }
      key={optionData.value}

      isOptionEqualToValue={(option, value) => (value === undefined)? false : (option.value === '""')? false : option.value === value.value}
      //   {
      //   value ? option.value === value.value : false;
      //   if(!value) return false;
      //   if(value.value ==='""') return false;
      //   // console.log('option.value ==> ',option.value)
      //   // console.log(option)
      //    console.log('value.value ==> ',value.value)
      //   // console.log(value)
      //   return option.value === value.value;
      // }}
      
      filterOptions={filterOptions}
      componentsProps={{ popper: { style: { width: "fit-content" } } }}
      size="small"
      id="dropdown-search"
      value={value}
      onChange={(event, newValue) => {
        // TODO: set user selected value as OBJECT
        setValue(newValue);
      }}
      inputValue={inputValue}
      onInputChange={(event, newInputValue) => {
        // TODO: this value is when user type on each key press
        setInputValue(newInputValue);
      }}
      width={width}
      options={optionData}
      autoHighlight
      /**
       *  ! renderOption
       *  this will show list of options, as a table format in dropdown list
       */
      renderOption={(props, option, index) => (
        <Box
          component="li"
          {...props} 
          style={{ display: "table-row" }}
          sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
         
          key={JSON.stringify(Object.values(option))}
        >
          {Object.keys(option).map((key, index) => (
            <div style={{ display: "table-cell", padding: "5px" }} key={index}>
              {option[key]}
            </div>
          ))}
        </Box>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label={label}
          inputProps={{ ...params.inputProps, autoComplete: "new-password" }}
        />
      )}
    />
  );
};

我的下拉列表将托管对象 示例：

options = [
    {label:'xxx1',value:'yyy1'},
    {label:'xxx2',value:'yyy2'}
]

我确认没有options.label或options.value =

""

我尝试了很多像下面这样的事情

这边

isOptionEqualToValue={(option, value) => option.value === value.value

还有这个

isOptionEqualToValue={(option, value) => {

         if(!value) return false;
         if(option.value ==="") return false;
         if(option.value ==='""') return false;
         if(value.value ==="") return false;
         if(value.value ==='""') return false;

         return option.value === value.value;
}}

Answer 1

您不需要

isOptionEqualToValue

带来额外的复杂性。无需定义此属性，只需将未选定的值设置为

null

而不是空字符串 (

""

)。

您可以在 CodeSandbox 上找到简化的工作示例。