reactjs antd 自动完成：道具`$$typeof`、`type` 的值无效

Question

我正在尝试在 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 但我不明白如何解决它。 如果有任何帮助，我将不胜感激。

Answer 1

点击查看正确使用方法

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

const { Option } = AutoComplete;

此外，如果您想使用选项 map 的结果应该是自动完成的孩子。

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以了解更多信息