Javascript React原生平面列表显示所有项目的相同值

所以基本上我有一个json文件，在这里我使用Flatlist进行渲染。所以我有这部分，它显示了平面列表中的数量。例如，苹果（4个数量）或橘子（8个数量）。所以，我的问题是，如果我增加苹果的数量，甚至香蕉的数量也会改变。例如，我单击苹果的5数量，但它也会更新香蕉的5数量。所以，我想要的是每种食物都有单独的数量。我怎么能解决这个问题，这是可能的吗。 我这里有以下代码-平面列表代码：

<FlatList
      data={this.state.data}
      renderItem={({ item }) => (
        <View>
          <View style={styles.itemList}>
            <View style={styles.imageRender}>
              <Image
                source={{
                  uri:
                    "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png",

                  // "https://thumbs.dreamstime.com/b/no-image-available-icon-photo-camera-flat-vector-illustration-132483296.jpg",
                  //
                  alt:
                    "https://thumbs.dreamstime.com/b/no-image-available-icon-flat-vector-no-image-available-icon-flat-vector-illustration-132482953.jpg",
                }}
                style={{ flex: 1, width: deviceWidth / 3.76 }}
              />
            </View>
            <TouchableOpacity
              
             onPress = {() => this.renderFoodName(item)}
            >
              <View style={styles.itemsRender}>
                <Text style={styles.itemName}>{item.foodName}</Text>

                <Text style={styles.itemPrice}>${item.price}</Text>
              </View>
            </TouchableOpacity>
            <View style={styles.quantityRender}>
              <View style={styles.alignSelfView}>
                <TouchableOpacity
                  style={styles.quantityButton}
                  onPress={this.IncrementItem}
                >
                  <Text style={styles.quantitySize}>+</Text>
                </TouchableOpacity>

                <Text style={styles.quantityNumber}>
                  {this.state.quantity}
                </Text>

                <TouchableOpacity
                  style={styles.quantityButton}
                  onPress={this.DecreaseItem}
                >
                  <Text style={styles.quantitySize}>-</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      )}
    />
 

})

})

---

如果有人能在这方面帮助我，那就太好了：）

您的组件只有一个

状态.quantity

。每个渲染的

项

s都有一个

TouchableOpacity

，带有

onPress={this.IncrementItem}

，用于设置组件的

状态。数量

。这是你的问题

您需要为每个项目设置一个

状态.quantity

，而不是每个项目编辑和呈现的单个

状态.quantity

---

我建议制作一个名为<代码>水果（或其他）的组件，它本身有一个数量状态，并呈现一个可触摸的不透明度，可以增加它。然后，您的平面列表将呈现一个组件列表，每个组件管理自己的状态。

您能告诉我创建组件的意思吗。你的意思是我必须分别为苹果和香蕉创建代码吗？如果你不知道如何构建组件，我建议你阅读react教程。经历它也可能帮助你自己解决这个问题。快乐编码：）非常感谢！！！是的，我是RN的初学者。我创建了一个类组件，它成功了：）

<View style={styles.quantityRender}>
              <View style={styles.alignSelfView}>
                <TouchableOpacity
                  style={styles.quantityButton}
                  onPress={this.IncrementItem}
                >
                  <Text style={styles.quantitySize}>+</Text>
                </TouchableOpacity>

                <Text style={styles.quantityNumber}>
                  {this.state.quantity}
                </Text>

                <TouchableOpacity
                  style={styles.quantityButton}
                  onPress={this.DecreaseItem}
                >
                  <Text style={styles.quantitySize}>-</Text>
                </TouchableOpacity>
              </View>
            </View>

constructor(props) {
super(props);
this.state = {
  foodInput: "",
  home: "flex",
  checkoutPage: "none",
  checkout: "",
  data: [],
  quantity: 0,
  show: false,
  foodCheckout: [],
};

IncrementItem = () => {
if (this.state.quantity >= 0) {
  this.setState({ quantity: Number(this.state.quantity + 1) });
}
if (this.state.quantity == 15) {
  Alert.alert("LIMIT REACHED! ", "You can only buy up 15 items per item", [
    {
      text: "I Understand!",
      style: "cancel",
    },
  ]);

  this.setState({
    quantity: Number(this.state.quantity + 0), // this one just adds 0 everytime
    //quantity:15 // this one set the updates the quantity to 15 each time
  });
}

DecreaseItem = () => {
if (this.state.quantity >= 1) {
  this.setState({
    quantity: Number(this.state.quantity - 1),
  });
}