Antd AutoComplete组件输入后不保留内容且缩成小框求助

嘿，我来帮你揪出这个AutoComplete组件输入时异常缩小的问题！结合你提供的代码和描述，我整理了几个核心排查方向和修复建议：

1. 先补全代码里的「隐患」 #

你代码里的useQuery变量里用了...other，但完全没看到other的定义——这要么会导致语法错误，要么会传递一堆未知参数给查询请求，间接引发组件状态异常。先把这个问题解决：

• 如果有额外需要传给查询的变量，明确写出来（比如...props.queryVariables）；
• 如果不需要，直接删掉...other。

2. 验证Options的格式是否符合要求 #

Antd的AutoComplete对options的结构有明确要求，每个选项必须包含label（显示文本）和value（选中值）字段。你用parseGroupNode和parseUserNode生成选项的过程中，很可能出现了字段缺失或者格式错误：

• 先手动模拟一组静态选项测试：

  const testOptions = [
    { label: "测试组1", value: "group1", group: "groups" },
    { label: "测试用户1", value: "user1", group: "users" }
  ];
  

  如果用静态选项时组件正常，那问题肯定出在parse函数的逻辑上，检查这两个函数是否返回了结构正确的数组。

3. 减少不必要的重渲染 #

每次输入时search状态变化会触发useQuery重新发起请求，loading状态的频繁切换可能导致组件反复重渲染，进而引发尺寸异常：

• 给useQuery加上skip选项，当search为空时跳过查询：

  const { loading, error, data } = useQuery(withGroupsQuery, {
    variables: { search: search || undefined },
    skip: !search, // 空输入时不发起请求
  });
  

• 可以在组件里加个console.log("组件重渲染了")，看看输入时的重渲染频率，如果过于频繁，还可以用React.memo包裹组件优化。

4. 排查样式冲突 #

有时候全局CSS或者自定义样式会意外覆盖Antd组件的默认尺寸：

• 用浏览器开发者工具选中AutoComplete的输入框，查看width、min-width等属性是否被强制设置成了很小的值；
• 可以在组件里显式指定宽度，比如给autoProps加上style: { width: "100%" }，强制组件占满容器宽度。

修改后的示例代码 #

结合上面的建议，调整后的代码大致如下：

import React, { useState } from 'react';
import { AutoComplete } from 'antd';
import { useQuery } from '@apollo/react-hooks';
import { withGroupsQuery } from './query';

// 确保parse函数返回符合要求的选项结构
const parseGroupNode = (groups = []) => {
  return groups.map(group => ({
    label: group.name || '未命名组', // 兜底处理避免label为空
    value: group.id,
    group: 'groups'
  }));
};

const parseUserNode = (users = []) => {
  return users.map(user => ({
    label: user.username || '未命名用户',
    value: user.id,
    group: 'users'
  }));
};

const AutoCompleteField = props => {
  const [search, setSearch] = useState('');
  const { loading, data } = useQuery(withGroupsQuery, {
    variables: { search: search || undefined },
    skip: !search, // 空输入时跳过查询
  });

  let options = [];
  if (data) {
    options = [...parseGroupNode(data.groups), ...parseUserNode(data.searchUsers)];
  }

  const autoProps = {
    options,
    onSelect: (selected, option) => {
      props.onSelect?.(selected, option.label, option.group); // 用可选链避免报错
    },
    onChange: setSearch,
    placeholder: props.placeholder,
    value: search,
    style: { width: '100%' }, // 强制设置宽度
    loading, // 把loading状态传给组件，统一加载状态展示
  };

  return <AutoComplete {...autoProps} />;
};

export default AutoCompleteField;

先从这些方向排查，应该能解决组件输入时缩成小框的问题～

内容的提问来源于stack exchange，提问作者Webel