#javascript #reactjs #react-native
Вопрос:
Здравствуйте, у меня возникли некоторые проблемы с привязкой.
У меня есть «продукты», там около 2000 элементов, и я хочу разбить его на страницы, например, должны отображаться только те элементы, которые пользователь может видеть на своем экране…
а также это должен быть какой-то другой массив для плоского списка, потому что у каждого товара есть кнопка корзины с собственным счетчиком.
а также у меня есть фильтр, и к этому фильтру должны быть помещены все предметы (из продуктов)
кстати, для чего мне это нужно: сейчас большие проблемы с производительностью из-за кнопки корзины. Это уменьшило все элементы, которые попали в плоский список
а вот встречный метод
counter(cartState, item) { const calc = cartState.products.reduce((acc, { productId }) =gt; { if (item.measurementUnit === 'кг') { const result = acc 0.1 return productId === item.productId ? result : acc } return productId === item.productId ? acc 1 : acc }, 0) return calc } const sortSelector = (state) =gt; state.sortFilter.sort const productsHelper = new ProductsHelper() const getHeaderFilter = (navigation, sort, products) =gt; { return () =gt; ( lt;Filter navigation={navigation} filter={false} sortType={sort} products={products} /gt; ) } export const PromotedAllList = () =gt; { const sort = useSelector(sortSelector) const loading = useSelector((state) =gt; state.products.promoted.loading) const height = Dimensions.get('screen').height const products = useSelector((state) =gt; state.products.promoted.data) const selectedShop = useSelector((state) =gt; state.stores.selectedStore) const [viewedItems, setViewedItems] = useState( products.slice(0, Math.floor(height / 125) 1) || [] ) const dispatch = useDispatch() const navigation = useNavigation() const promotedProducts = productsHelper.sortProducts(viewedItems, sort) const handleVieweableItemsChanged = useCallback(({ changed }) =gt; { setViewedItems((oldViewedItems) =gt; { let newViewedItems = null changed.forEach((item) =gt; { if ( item.item != null amp;amp; item.isViewable amp;amp; !oldViewedItems.some((el) =gt; el.productId === item.item.productId) ) { if (newViewedItems == null) { newViewedItems = [...oldViewedItems] } newViewedItems.push(item.item) } }) return newViewedItems == null ? oldViewedItems : newViewedItems }) }, []) const viewConfigRef = useRef({ viewAreaCoveragePercentThreshold: 50 }) useEffect(() =gt; { dispatch(addPromotedRequest({ shops: [selectedShop] })) }, []) if (!promotedProducts.length) { return lt;Text style={styles.nofound}gt;Товарів не знайденоlt;/Textgt; } return ( lt;View style={styles.container}gt; lt;ProductsSpinner isLoading={loading} /gt; lt;FlatList ListHeaderComponent={getHeaderFilter( navigation, sort, promotedProducts )} extraData={products} onViewableItemsChanged={handleVieweableItemsChanged} style={styles.container} showsVerticalScrollIndicator={false} data={viewedItems} pagingEnabled={true} viewabilityConfig={viewConfigRef.current} keyExtractor={({ productId }) =gt; `products-list-${productId}`} renderItem={({ item, index }) =gt; { return ( lt;ProductItem description={item.description} navigation={navigation} item={item} name={item.name} discountPercent={item.discountPercent} availability={item.availableQuantity} photo={{ uri: getProductPhoto(item.productId) }} isPromoted={item.isPromoted} measurementUnit={item.measurementUnit} availableQuantity={item.availableQuantity} discountPrice={item.discountPrice} regularPrice={item.regularPrice} /gt; ) }} /gt; lt;/Viewgt; ) } const styles = StylesUtils.createStyleSheet({ container: { flex: 1 }, nofound: { fontSize: 22, fontWeight: 'bold', textAlign: 'center', paddingTop: 30, color: 'gray' } })