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

Question

我正在使用 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)}
          />

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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