Question

我在平面列表中创建了一个按钮，当用户单击特定项目时，该按钮应更改状态，并应显示增量按钮，但所有项目的按钮更改状态。我也通过了id，但是它不起作用，有人可以帮我吗？下面是我的代码

Items.js

<FlatList
              data={this.props.items}
              extraData={this.props}
              keyExtractor={(items) => items.id.toString()}
              numColumns={2}
              renderItem={({ item }) => (
                <CardBuyItem>
                  <Image style={styles.image} source={item.image} />
                  <View style={styles.detailContainer}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Text style={styles.subTitle} numberOfLines={1}>
                      {item.subTitle}
                    </Text>
                    <Text style={styles.price}>Rs {item.price}</Text>
                  </View>

                  {this.props.button && this.props.added.length > 0 ? (
                    <View style={styles.add}>
                      <Text style={styles.quantity}>{item.quantity}</Text>
                      <MaterialCommunityIcons
                        style={styles.iconUp}
                        size={20}
                        name="plus-circle-outline"
                        onPress={() => this.props.addQuantity(item.id)}
                      />
                      <MaterialCommunityIcons
                        style={styles.iconDown}
                        size={20}
                        name="minus-circle-outline"
                        onPress={() => this.props.subtractQuantity(item.id)}
                      />
                    </View>
                  ) : (
                    <View style={styles.buy}>
                      <Text
                        style={styles.buyonce}
                        onPress={() => {
                          this.props.addToCart(item.id);
                          this.props.showCart();
                          this.props.showButton(item.id);
                        }}
                      >
                        Buy Once
                      </Text>
                    </View>
                  )}
                </CardBuyItem>
              )}
            />
const mapStateToProps = (state) => {
  return {
    items: state.clothes.jeans,
    button: state.clothes.showButton,
    added: state.clothes.addedItems,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (id) => dispatch(addToCart(id)),
    addQuantity: (id) => dispatch(addQuantity(id)),
    subtractQuantity: (id) => dispatch(subtractQuantity(id)),
    showCart: () => dispatch(showCart()),
    showButton: (id) => dispatch(showButton(id)),
  };
};

这是我的带有mapStateToProsp和mapDispatchToProps的项目列表，此处的按钮应更改其状态

reducer.js

if (action.type === SHOW_BUTTON) {
    let addedItem = state.jeans.find((item) => item.id === action.id);
    return {
      ...state,
      addedItem: addedItem,
      showButton: action.showButton,
    };
}

const initialstate = {  showButton: false}

这是我的reducer函数，具有该按钮的初始状态

action.js

export const showButton = (id) => {
  return {
    type: SHOW_BUTTON,
    showButton: true,
    id,
  };
};

这是我要为减速器描述动作的动作

Answer 1

为此您有一个公共状态变量，该变量会显示所有按钮。

您可以像这样做一个简单的解决方案。在您的单位列表中，您可以显示按钮的逻辑

{this.props.added.find(x=>x.id==item.id) !=null ? (

或者，如果您必须使用化简器，则必须在数组中具有一个属性并更新它，这很难维护。

React Native，状态更改为所有项目，而不是单击的项目

1 个答案: