reactjs和Autocomplete: props ' $$typeof '， ' type '的值无效

Question

我想写一个搜索栏在reactjs和自动完成，但我有这个错误:

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

在我看来，我不能用漫画。标题在选项字段，但我不知道如何修复它。我将非常感谢任何帮助。

Answer 1

点击查看

的正确使用方法你使用的选项元素是错误的。它应该来自Autocomplete元素本身:

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以了解更多自动完成API