Блог

Предыстория

Я создаю экран для приложения, в котором отображается ряд продуктов, полученных из коллекции firebase firestore. Я отображаю продукты с помощью плоского списка, это код:

              <FlatList
                    style={selected ? styles.visible : styles.hidden}
                    data={data}
                    renderItem={({ item }) => (
                        <View style={styles.container}>
                            <View style={styles.left}>
                                <Text style={styles.title}>{item.name}</Text>
                                <Text style={styles.description}>{item.description}</Text>
                                <Text style={styles.price}>${item.price}</Text>
                                <View style={styles.adder}>
                                    <TouchableOpacity onPress={() => setCount(count - 1)}>
                                        <Text style={styles.less}>-</Text>
                                    </TouchableOpacity>
                                    <Text style={styles.counter}>{count}</Text>
                                    <TouchableOpacity onPress={() => setCount(count   1)}>
                                        <Text style={styles.more}> </Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <Image style={styles.right} source={{uri: item.image}}/>
                        </View>
                    )}
                />
 

Проблема

Как вы можете видеть, для каждого элемента есть счетчик, который пользователь может использовать, чтобы выбрать, сколько единиц продукта они хотят купить. Состояние обновляется следующим образом: const [count, setCount] = useState(0); как вы можете видеть, этот способ реализации счетчика означает, что добавление одной единицы любого продукта добавляет единицу каждого продукта.

Что я пробовал

Я видел, как некоторые люди делают это: setCount({counterA: 0, counterB: 0, etc.}) и обновляют каждый счетчик, однако, поскольку количество продуктов в документе firebase постоянно меняется, я не могу жестко указать количество счетчиков, которые мне нужны.

Вопрос

Как я могу отредактировать свой код, чтобы он влиял только на нужный элемент?

Элемент в вашей renderItem функции должен быть отдельным компонентом. В этом отдельном компоненте у вас будет a count , область действия которого ограничена только компонентом. Поэтому, когда кнопка нажата на этом компоненте, увеличивается только его счетчик, а не остальные. Проблема сейчас в том, что у вас есть один счетчик, который находится в родительском компоненте. После создания этого нового компонента «подсчета» ваш плоский список будет выглядеть примерно так:

                 <FlatList
                    style={selected ? styles.visible : styles.hidden}
                    data={data}
                    renderItem={({ item }) => (
                        <CountingComponent />
                    )}
                />