如何比较两个数组的值以及两者是否相等 return 不同。那个按钮

Question

我正在渲染一个平面列表，我想根据按钮的 ID 是否在我的购物车中来显示一个按钮。我该怎么做....

这是我的按钮代码：

addBtn = (id) => {

        try{
            let productAdded = this.state.addedToCart;
            return productAdded.map((pid) => {
                if (pid == id) {
                    // console.log(pid);
                    // console.log("-----------");
                    console.log(id + " is added into cart");
                    return(
                        <Button
                            key={id}
                            style={{ 
                                backgroundColor: '#fff',
                                borderWidth: 2,
                                borderColor: '#2e6153',
                                borderStyle: 'solid',
                            }}
                        >
                            <Text style={{color: '#2e6153',}}>Added</Text>
                        </Button>
                    );
                } else {
                    console.log("not added to cart");
                    return(
                        <Button
                            key={id}
                            onPress={() => {
                                this.saveCart(id);
                            }} 
                            style={{ 
                                backgroundColor: '#2e6153',
                                borderWidth: 2,
                                borderColor: '#2e6153',
                                borderStyle: 'solid',
                                width: 80,
                                alignItems: 'center',
                                justifyContent: 'center',
                            }}
                        >
                            <Text>Add</Text>
                        </Button>
                    );
                }
            });
        }catch(errors){
            console.log(errors);
        }

    }

其中 "addBtn = (id)" 的 id 来自 FlatList 的 renderItem。

和 this.state.addedToCart 是我购物车中的商品数组。 目前我在购物车中添加了两件商品，所以 this.state.addedToCart = ["1015", "1016"]

输出为： Here is the image of my output

我只想渲染一次，但按钮的渲染次数与我的购物车大小一样多。

Answer 1

我想有问题：

return productAdded.map((pid) => {

只需删除它并将 if 语句更改为：

if (productAdded.includes(id)) {

所以它将return只有一个按钮