The error “Cannot read property ‘length’ of null” occurs.
When I input an SKU all at once in the search bar, it returns items,
but when I enter it one character at a time, it does not return anything.
Is this an error from Shopify’s API?
Here is the Shopify documentation I referred to:
ProductSearch API
import React, { useState } from 'react'
import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';
const Modal = () => {
const api = useApi<'pos.home.modal.render'>();
const [data, setData] = useState<ListRow[]>([]);
const search = async (queryString?: string) => {
const results = await api.productSearch.searchProducts({queryString})
const data = results.items.map((product): ListRow => {
return {
id: String(product.id),
leftSide: {
label: product.title,
image: {
source: product.featuredImage
}
}
}
})
setData(data)
}
return (
<Navigator>
<Screen name="HelloWorld" title="Hello World!">
<List
listHeaderComponent={<SearchBar
placeholder='Search products'
onTextChange={search}
onSearch={search}
/>}
imageDisplayStrategy='always'
data={data}
/>
</Screen>
</Navigator>
)
}
export default reactExtension('pos.home.modal.render', () => <Modal />);
