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

Question

所以基本上我有一个 json 文件，我在其中使用 Flatlist 进行渲染。所以我有这一部分，它在 Flatlist 中显示数量。例如，Apple（4 个数量）或 Orange（8 个数量）。所以，我的问题是，如果我增加苹果的数量，香蕉的数量也会发生变化。例如，我点击了 5 个苹果数量，但它也更新了 5 个香蕉数量。所以，我想要的是每种食物都有单独的数量 item.How 我可以解决这个问题吗？这甚至可能吗？我在 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。您渲染的每个 Item 都有一个 TouchableOpacity 和 onPress={this.IncrementItem}，它设置组件的 state.quantity。这是你的问题。

您需要的是每个项目有一个 state.quantity，而不是每个项目编辑和呈现的单个 state.quantity。

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

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

React Native FlatList Display Same Value For All Items

javascript

reactjs

react-native

react-native-flatlist