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

Material-ui lt;Autocomplete /gt; getOptionLabel - passing empty string as value(Material-UIlt;AutoComplete/gt;getOptionLabel-将空字符串作为值传递)

本文介绍了Material-UI<AutoComplete/>getOptionLabel-将空字符串作为值传递的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是Material-UI AutoComplete。我将一些状态数组传递给它的属性选项。我面临的问题是getOptionLabel:

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

我有两个组件。子项为:

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:

值的Reaction钩子
  const [selectedState, setSelectedState] = useState([""]);
所以,当我最初将selectedState作为属性传递给StateSelect时,它是[‘’],并且我收到了这个错误消息。如何将空值作为初始值传递而不出现此错误?

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

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

推荐答案

我收到了相同的错误。而且,下面的方法对我很有效。

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

这篇关于Material-UI&lt;AutoComplete/&gt;getOptionLabel-将空字符串作为值传递的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Material-UI&lt;AutoComplete/&gt;getOptionLabel-将空字符串作为值传递

基础教程推荐