reactjs antd Autocomplete：道具`$$typeof`，`type`的值无效答案

【问题标题】：reactjs antd Autocomplete: Invalid values for props `$$typeof`, `type`reactjs antd Autocomplete：道具`$$typeof`，`type`的值无效
【发布时间】：2021-05-11 07:26:32
【问题描述】：

我正在尝试在 reactjs 和 antd 自动完成中编写一个搜索栏，但我有这个错误：

Invalid values for props `$$typeof`, `type` on div tag

这是我主页的代码：

const Home = () => {
    const [searchQuery, setSearchQuery] = useState("");
    const { data, loading } = useQuery(query, {
        skip: searchQuery.length < MIN_QUERY_LENGTH,
        variables: { searchTitle: searchQuery }
    });

    const handleChange = useCallback(
        _.throttle(searchQuery => {
            setSearchQuery(searchQuery)
        }, THROTTLE_TIME), [setSearchQuery]);
    
    const options = !loading && data && data.mangas && data.mangas.map(manga => {
        return (
            <Option key={manga.id} value={manga.title} >
                {manga.title}
            </Option>
        )
    });

    return (
        <div className="main-search-container">
            <Search
                options={options}
                onChange={handleChange}
            />
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

这里是我的搜索栏的代码：

const Search = ({ options, onChange }) => (
  <div className= "certain-categorie-search-wrapper"
      style={{ width: 500}}>
      <AutoComplete
        className="certain-categorie-search"
        dropdownClassName="certain-category-search-dropdown"
        dropdownMatchSelectWidth={false}
        dropdownStyle={{ width: 300}}
        style={{ width: "100%" }}
        options={options}
        onChange={onChange} 
        placeholder="Search Mangas"
      >
        <Input
          suffix={
            <SearchOutlined />
          }  />

    </AutoComplete>

  </div>
  
);

你可以在这里找到我的代码：https://codesandbox.io/s/fervent-curie-44vb3?fontsize=14&hidenavigation=1&theme=dark

据我所知，我无法在 Option 字段中使用 manga.title，但我不明白如何修复它。如有任何帮助，我将不胜感激。

【问题讨论】：

你能显示<Option /> 代码吗？另外，你能解释一下你为什么can't use manga.title吗？最好的方法是创建一个代码框（您可以形成重现问题的mine。您可能无法获取数据，因此只需将其替换为硬编码数组即可。
感谢您的回复，这是我从您的代码和框codesandbox.io/s/… 制作的叉子，我重现了我遇到的确切问题。

标签： javascript html json reactjs antd

【解决方案1】：

Click to see the correct way to use

您使用的选项元素是错误的。它应该来自自动完成元素本身：

const { Option } = AutoComplete;

另外，如果您想使用选项，地图的结果应该是自动完成的CHILD。

const options = mangas.map((manga) => {
  return (
    <Option key={manga.id} value={manga.title}>
      {manga.title}
    </Option>
  );
});

const Search = ({ options, onChange }) => (
  <div className="certain-categorie-search-wrapper" style={{ width: 500 }}>
    <AutoComplete
      className="certain-categorie-search"
      dropdownClassName="certain-category-search-dropdown"
      dropdownMatchSelectWidth={300}
      style={{ width: "100%" }}
      onSearch={onChange}
      placeholder="Search Mangas"
    >
      {options}
    </AutoComplete>
  </div>
);

在此处查看 API 以了解更多信息Autocomplete API

【讨论】：