Material UI Autocomplete 空字符串的默认值答案

【问题标题】：Material UI Autocomplete default value of empty stringMaterial UI Autocomplete 空字符串的默认值
【发布时间】：2020-07-27 20:35:44
【问题描述】：

将空字符串传递给自动完成时，它会引发控制台警告，指出该值无效。

如何让这个警告消失？它不会引起任何问题，但是每次重新渲染时都将它扔到控制台中是非常烦人的。我似乎让它不会发生的唯一方法是将字段的初始值设置为 null，据我了解，这不是我应该将其作为输入的默认值。

当前行为????

将空字符串的默认值传递给自动完成组件时，它会抛出一个控制台警告该值空字符串无效。

预期行为????

如果给自动完成的值是一个空字符串，应该不会抛出警告或错误。

复制步骤？？？？

这里是展示错误的链接：https://codesandbox.io/s/material-demo-n0ijt

1) 将一个空字符串传递给 Autocomplete 组件的 value 属性。

【问题讨论】：

请更新您的问题并删除所有不相关的内容。这是material-ui github页面的issue模板的复制粘贴。请不要在 stackoverflow 中使用它。
似乎是展示我所做的事情以及我遇到的问题的好方法。
如前所述——只保留相关数据（结构不相关，环境不相关等...）

标签： reactjs autocomplete material-ui

【解决方案1】：

您可以使用null 作为初始状态，这可能会实现您的目标

value={data.value || null}

如果您将其设置为未定义，它会抱怨受控组件，这样即使在使用自动完成后我也不会收到错误

【讨论】：

当我做value={val} 时，做const val = [val, setVal] = useState(null); 效果很好

【解决方案2】：

我解决了它处理输入字符串为空的情况（你没有这样做）。沙盒中需要 3 样东西：

第17行，getOptionSelected内，当值为空字符串时必须返回true；这样 React 选择了一个选项，警告就消失了。
第14行，修改getOptionLabel，处理空字符串的情况。我会做以下事情：

getOptionLabel={option => option.title ? option.title : ''}

所以如果选项有标题，则返回标题，否则返回可视化的空字符串。

最后修改onChange处理空字符串，这样

onChange={(e, selectedObject) => {
    if (selectedObject !== null)
        setValue(selectedObject)
}}

总体：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function FreeSoloCreateOption() {
  const [value, setValue] = React.useState("");

  return (
    <Autocomplete
      value={value}
      id="empty-string-demo"
      options={top100Films}
      getOptionLabel={option => option.title ? option.title : ''}
      getOptionSelected={(option, value) => {
        //nothing that is put in here will cause the warning to go away
        if (value === "") {
          return true;
        } else if (value === option) {
          return true;
        }
      }}
      onChange={(e, selectedObject) => {
        if (selectedObject !== null)
            setValue(selectedObject)
      }}
      renderOption={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField
          {...params}
          label="Default Value of Empty String"
          variant="outlined"
        />
      )}
    />
  );
}

【讨论】：

谢谢！就我而言，只是标签格式化程序导致了问题。将其更新为getOptionLabel={(option) => (option && option.label)? option.label: ""}
这就是我的工作：getOptionLabel={option => option?.title || ''}getOptionSelected={(option, value) => value === '' || option.id === value.id}
我已经尝试了上述解决方案。组件初始化时，下拉菜单中的所有选项都处于选定模式。我可以解决这个问题吗？

【解决方案3】：

一个简单的改变是过滤掉初始重置

onChange={(event, newValue, reason) => {
    if (reason === 'reset' && newValue === '') {
        // Do nothing
    }
    else {
        setValue(newValue);
    }
}}

【讨论】：

【解决方案4】：

将此添加到您的自动完成...

getOptionSelected={(option, value) => {
    // Accept empty string
    if(value === "" || value === option) { return true; }
}}

【讨论】：

【解决方案5】：

  <Autocomplete className={styles['vacation-list-status']}
                        id="vacation-list-status"
                        options={vacationStatus}
                        getOptionLabel={option => option.label}
                        onChange={(event, newValue) => {
                          handleVacationStatus( 
                              newValue ? newValue.value : null
                          );
                        }}
                        renderInput={(params) => (
                           <TextField
                            {...params}
                            variant="outlined"
                            label={t('status')}
                           />
                        )}
                    />

【讨论】：