Mui5 自動完成警告

Question

我正在使用 Material-UI 5 AutoComplete 組件，但收到一個我無法處理的警告。

代碼：

       <Autocomplete
          disableClearable
          options={options}
          value={{ displayName: selectedName || "" }}
          getOptionLabel={(option) => option.displayName || ""}
          onChange={onSelectChange.bind(null, selectedName)}
          isOptionEqualToValue={(option, selected) =>
             option.displayName === selected.displayName
          }
          renderOption={(props, option) => (
            <li {...props}>
              <Typography>{option.displayName}</Typography>
            </li>
          )}
         renderInput={(params) => (
            <TextField
              {...params}
              variant="outlined"
              placeholder={placeholder}
            />)}
        />

警告：

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

每個選項都是一個帶有 displayName 字段的 object，（例如：{displayName}）

我看到了一些關於它的帖子，但沒有任何幫助。 我正在使用一個受控組件（值屬性）並且在第一次渲染時 selectedName 是空的所以我在從列表中選擇一個項目之前收到錯誤。

Answer 1

也許應該檢查 isOptionEqualToValue 來檢查所選的值？ 類似這樣：

isOptionEqualToValue={(option, value) => {
          if (value === "" || value === option)
              return true;
      }}

實際上是檢查顯示名稱。