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

【问题标题】：Material-ui <Autocomplete /> getOptionLabel - passing empty string as valueMaterial-ui <Autocomplete /> getOptionLabel - 将空字符串作为值传递
【发布时间】：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。为什么默认状态是数组而不是空字符串？

标签： javascript reactjs material-ui react-hooks

【解决方案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:'')}

【讨论】：