React Native FlatList 为所有项目显示相同的值

Question

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

<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>
      )}
    />
 

` 这是我的数量代码，它已经在上面的代码中了，但我把它放在这里是为了整洁：

<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),
  });
}

};

如果有人帮助我，那就太好了:)

Answer 1

您的组件有一个state.quantity。您渲染的每个Items 都有一个TouchableOpacity 和onPress={this.IncrementItem}，它设置了组件的state.quantity。这是你的问题。

您需要为每个项设置一个state.quantity，而不是每个项都编辑和呈现的单个state.quantity。

我建议制作一个名为Fruit（或其他任何东西）的组件，它本身具有数量状态并呈现可以增加它的可触摸不透明度。然后你的 flatlist 会呈现一个 Fruit 组件列表，每个组件都管理自己的状态。