在React Native平面列表中实现计数器

Question

背景

我正在为一个应用程序构建一个屏幕，它显示了从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文档中的产品数量总是在变化，我无法硬编码我需要的计数器数量。

问题

如何编辑我的代码，使其只影响所需的项目？

Answer 1

renderItem函数中的项应该是一个单独的组件。在这个单独的组件中，您将有一个仅适用于该组件的count。因此，当按下该组件上的按钮时，只有其计数会增加，而其他计数则不会增加。现在的问题是，父组件上有一个计数。在创建了这个新的"；计数"；componenet，你的FlatList会看起来像：

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