antd autocomplete
interface IOption {
value: IProduct;
label: string | React.ReactNode;
}
const [productOptions, setProductOptions] = useState<IOption[]>([]);
const renderItem = (product: IProduct, title: string, imageUrl: string) => ({
value: product,
label: (
<Row key={product.id} style={{ display: "flex", alignItems: "center" }}>
<Avatar
shape="square"
size={64}
src={imageUrl}
style={{ minWidth: "64px" }}
/>
<Text style={{ marginLeft: "16px" }}>{title}</Text>
</Row>
),
});
const { refetch: refetchProducts } = useList<IProduct>({
resource: "products",
pagination: {
pageSize: 1000,
},
queryOptions: {
enabled: false,
onSuccess: (data) => {
const productOptions = data.data.map((item) =>
renderItem(item, ${item.name} / #${item.code}, item.image)
);
if (productOptions.length > 0) {
setProductOptions(productOptions);
}
},
},
});
useEffect(() => {
setProductOptions([]);
refetchProducts();
}, []);
<AutoComplete
options={productOptions}
filterOption={false}
onSelect={(value, option) => {
console.log(value);
console.log(option);
}}
<Input
size="large"
placeholder={t("search.placeholder")}
suffix={<SearchOutlined />}
/>
</AutoComplete>
help, why im i getting this error: Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
value: IProduct;
label: string | React.ReactNode;
}
const [productOptions, setProductOptions] = useState<IOption[]>([]);
const renderItem = (product: IProduct, title: string, imageUrl: string) => ({
value: product,
label: (
<Row key={product.id} style={{ display: "flex", alignItems: "center" }}>
<Avatar
shape="square"
size={64}
src={imageUrl}
style={{ minWidth: "64px" }}
/>
<Text style={{ marginLeft: "16px" }}>{title}</Text>
</Row>
),
});
const { refetch: refetchProducts } = useList<IProduct>({
resource: "products",
pagination: {
pageSize: 1000,
},
queryOptions: {
enabled: false,
onSuccess: (data) => {
const productOptions = data.data.map((item) =>
renderItem(item, ${item.name} / #${item.code}, item.image)
);
if (productOptions.length > 0) {
setProductOptions(productOptions);
}
},
},
});
useEffect(() => {
setProductOptions([]);
refetchProducts();
}, []);
<AutoComplete
options={productOptions}
filterOption={false}
onSelect={(value, option) => {
console.log(value);
console.log(option);
}}
<Input
size="large"
placeholder={t("search.placeholder")}
suffix={<SearchOutlined />}
/>
</AutoComplete>
help, why im i getting this error: Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
