Question

我正在尝试创建一个自动完成字段，该字段从组件状态（状态从后端获取）中获取选项。这是我的组件：

$rootNode
    ->children()
        ->arrayNode('storages')
            ->isRequired()
            ->requiresAtLeastOneElement()
            ->useAttributeAsKey('name')
            ->arrayPrototype()
                ->children()
                    ->enumNode('type')
                        ->values(['TYPE_A', 'TYPE_B'])
                        ->isRequired()
                        ->cannotBeEmpty()
                    ->end()
                    ->scalarNode('connection')->isRequired()->end()
                    ->scalarNode('path')->isRequired()->end() // This should be required AND available only if type is TYPE_A. TYPE_B should not have this parameter.
                ->end()
            ->end()
        ->end()
    ->end();

但是由于某种原因，我的状态中的options数组无法识别为数组（尽管我使用空数组对其进行了初始化）。我收到此警告：

export const Person: React.FC<PersonProps> = ({name, avatar, setMainState}: PersonProps) => {
  const [location, setLocation] = useState('');
  const [options, setOptions] = useState([]);
  const change = (event: any) => {
    setLocation(event.target.value)
    setMainState(event.target.value)
  }
  
  useEffect(() => {
    axios
      .get(`http://localhost:8080/autocomplete/?str=` + location)
      .then(res => {
        setOptions(res.data);
      })
  },[location])

  return <Box display="flex" height="30%">
    <Typography>{name}</Typography>
    <Autocomplete
      id="combo-box-demo"
      options={options}
      getOptionLabel={(option) => option as string}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
    />
  </Box>
};

您知道可能是什么原因吗？任何想法都会有所帮助：）谢谢！

Answer 1

我的假设是，当您这样做时： setOptions(res.data); 您将options设置为对象，而不是数组。

实际上，错误提示： ..."options" of type "object" supplied to "ForwardRef(Autocomplete)", expected "array". 因此，它需要一个数组，但是您正在提供一个对象

材质ui自动完成功能无法将options参数识别为数组

1 个答案: