Material-ui <Autocomplete /> getOptionLabel - 将空字符串作为值传递

Posted 2023-02-22

【中文标题】Material-ui <Autocomplete /> getOptionLabel - 将空字符串作为值传递

【英文标题】：Material-ui <Autocomplete /> getOptionLabel - passing empty string as value

【发布时间】：2020-11-06 01:21:21

【问题描述】：

我正在使用 material-ui 自动完成功能。我将一些状态数组传递给它的属性选项。我面临的问题是getOptionLabel：

Material-UI: The `getOptionLabel` method of Autocomplete returned undefined instead of a string for [""].

我有 2 个组件。孩子是：

const StateSelect = (props) => 
  const classes = useStyles();
  const handlePick = (e, v) => 
    props.setState(v);
  ;
  return (
    <Autocomplete
      className=classes.inputStyle
      options=states
      getOptionLabel=(option) => (option ? option.name : "")
      onChange=handlePick
      value=props.state
      renderInput=(params) => (
        <TextField ...params label="State" variant="outlined" />
      )
    />
  );
;

在父组件中，我调用了这个子组件：

 <StateSelect
            state=selectedState
            setState=(state) => setSelectedState(state)
          />

在父级中，我有控制 StateSelect 值的 React 钩子：

  const [selectedState, setSelectedState] = useState([""]);

所以当我最初将 selectedState 作为道具传递给 StateSelect 时，它是 [''] 并且我收到了此错误消息。如何将空值作为初始值传递而不出现此错误？

我上传了我的代码的简单版本：

https://codesandbox.io/s/smoosh-field-j2o1p?file=/src/inputStates/input.js

【问题讨论】：

据我所见，getOptionLabel 函数首先使用[""] 调用，它将在三元中返回 undefined。为什么默认状态是数组而不是空字符串？

【参考方案1】：

您的默认值是一个包含空字符串[""] 的数组，在三元组中评估时将返回true，因此尝试访问未定义的属性option.name。您需要对此进行测试或使用空字符串初始化状态，该字符串在 JS 中是一个虚假值。

【参考方案2】：

我遇到了同样的错误。而且，以下内容对我有用。

getOptionLabel=(option) => option.name || ""

【参考方案3】：

我遇到了类似的问题，我可以选择字符串数组。例如：["delhi", "new york", "mumbai"]。我通过添加一个检查来修复它，如果选项是一个字符串，如果不是一个空字符串。

getOptionLabel=(option) => typeof option === 'string'
                  || option instanceof String ? option : ""

【参考方案4】：

我通过设置这样的值解决了这个问题。

getOptionLabel=(option)=>(option.name?option.name:'')