MUI：提供给自动完成的值无效。这些选项都与``''''''

Question

当在自动完成组件的输入中输入一个值时，我会收到此警告，我无法删除... 这就是我的输入看起来，

 <Autocomplete
            id="cboAdresse"
            sx={{ width: 100 + "%", fontFamily: "Poppins Bold" }}
            getOptionLabel={(option) =>
              typeof option === "string" ? option : option.label
            }
            filterOptions={(x) => {
              return x;
            }}
            options={lstadresse}
            isOptionEqualToValue={(option, value) =>
              value.label === option.label
            }
            autoComplete
            includeInputInList
            filterSelectedOptions
            value={adresse}
            noOptionsText="Aucune adresse trouvée"
            onChange={(event, newValue) => {
              setLstAdresse(
                newValue.name ? [newValue.name, ...lstadresse] : lstadresse
              );
              setAdresse(newValue.name);
              if (newValue.name != "") {
                setVille(newValue.city);
                setCodePostal(newValue.postcode);
              }
            }}
            onInputChange={(event, newInputValue) => {
              setInputRue(newInputValue);
            }}
            renderInput={(params) => (
              <div
                ref={params.InputProps.ref}
                className="login-block__input form_input_white"
              >
                <input
                  type="text"
                  name="adresse"
                  placeholder="Adresse"
                  {...params.inputProps}
                />
              </div>
            )}
      />

我们可以看到我已经集成了iSoptionequaltovalue参数而没有解决问题。在我的研究期间，其他人面临这个问题，并用我用Isoptionequaltovalue编写的内容解决了这一问题。如果有人有解决方案，我有兴趣。提前致谢。

Answer 1

在MUI V5中使用此

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

Answer 2

该解决方案是使用null代表自动完成组件的任何值。我在自动完成组件周围包装器中有以下代码。

const { 
    // ... other props
    value: valueProp,
     } = props;

// ...

let value = valueProp;
if (valueProp == null || valueProp = '') {
    valueProp = null
}
return (
    <Autocomplete
        clearOnBlur
        value={valueProp}
    />
);

由于使用NULL时会出现其他问题，因此需要清晰的Onblur。参见我的评论

Answer 3

我的解决方案是，假设输入：

警告出现：

const [dropDownValue, setDropDownValue] = React.useState<any>('');

没有警告，没有出现交战：

const [dropDownValue, setDropDownValue] = React.useState<any>(null);

---

将状态绑定到自动填充以使其受到控制：

        <Autocomplete
            value={dropDownValue}
            onChange={(e, newDropDownValue)=> 
            setDropDownValue(newDropDownValue)}

我的选择是：

[
            { label: 'The Shawshank Redemption', year: 1994 },
            { label: 'The Godfather', year: 1972 },
            { label: 'The Godfather: Part II', year: 1974 },
            { label: 'The Dark Knight', year: 2008 },
]

---

底线：将null放入受控状态，为空，或者“无效” ，它将出现错误。

或者，自动完成作品的“ freesolo”属性，但它删除了下拉符号 /图标，因此并不理想。

Answer 4

使用isoptionequaltovalue属性如下

<Autocomplete
   ...
   isOptionEqualToValue={(option, value) => (option === value || value === "")}
>
</Autocomplete>

Answer 5

我发现的唯一解决方案是仅在您的选项中添加一个空字符串。