试图用另一个对象数组过滤一个对象数组

Question

我正在尝试将购物车添加到我的应用程序中。我需要通过将 ID 与我的 cart 数组 中的对象匹配来过滤我的 product 数组，然后将其显示在我的 Flatlist 上。 我已经测试以确保我可以使用其他方法（如 include()）过滤产品列表。

我无法让当前代码工作。

为了便于阅读，我已将代码简化到最低限度。

    <View>
        <Text>
            Cart
        </Text>
        <FlatList
            data={this.props.products.products.filter(product => this.props.cart.cart.some(el => el === product.id))}
            renderItem={renderMenuItem}
            keyExtractor={item => item.id.toString()}
        />
    </View>

这是我保存数组的 db.json 文件。

"products": [
        {
            "id": 0,
            "name": "Ezywhip Pro",
            "category": "chargers",
            "label": "",
            "featured": false,
            "description": "Ezywhip Pro Cream Chargers, Made by MOSA",
            "image": "images/ezywhip.png",
            "quantity": 0,
            "price": 0
        },
        {
            "id": 1,
            "name": "Ezywhip Pro",
            "category": "ezy",
            "label": "",
            "featured": false,
            "description": "Ezywhip Pro Cream Chargers, Made by MOSA",
            "image": "images/ezywhip.png",
            "quantity": 50,
            "price": 40
        },
        {
            "id": 2,
            "name": "Ezywhip Pro",
            "category": "ezy",
            "label": "",
            "featured": false,
            "description": "Ezywhip Pro Cream Chargers, Made by MOSA",
            "image": "images/ezywhip.png",
            "quantity": 100,
            "price": 70
        }
],
    "cart": [
        {
            "id": 1
        }
    ]

结果当前是一个空平面列表。 提前感谢您的任何反馈。

Answer 1

您的“some()”方法中缺少购物车数组项的“id”属性。

例如： this.props.cart.cart.some(el => el.id === product.id))

所以完整的代码是

data={this.props.products.products.filter(product => this.props.cart.cart.some(el => el.id === product.id))}

这是因为您的 cart 是一个以 id 为属性的对象数组，因此在您的代码中，el 引用了购物车对象，并且使用 el.id 检查了相等性。

我尝试将其分解，使其可以作为 JS sn-p 运行，以便您可以在下面看到它的运行情况。

const products = [
        {
            "id": 0,
            "name": "Ezywhip Pro",
            "category": "chargers",
            "label": "",
            "featured": false,
            "description": "Ezywhip Pro Cream Chargers, Made by MOSA",
            "image": "images/ezywhip.png",
            "quantity": 0,
            "price": 0
        },
        {
            "id": 1,
            "name": "Ezywhip Pro",
            "category": "ezy",
            "label": "",
            "featured": false,
            "description": "Ezywhip Pro Cream Chargers, Made by MOSA",
            "image": "images/ezywhip.png",
            "quantity": 50,
            "price": 40
        },
        {
            "id": 2,
            "name": "Ezywhip Pro",
            "category": "ezy",
            "label": "",
            "featured": false,
            "description": "Ezywhip Pro Cream Chargers, Made by MOSA",
            "image": "images/ezywhip.png",
            "quantity": 100,
            "price": 70
        }
]

const cart = [
        {
            "id": 1
        }
    ]
const filtered = products.filter(product => cart.some(el => el.id === product.id))
console.log('Filtered: ', filtered)

Answer 2

据我了解，您希望显示购物车及其相应产品的列表。因此，您可以迭代 cart 数组 以获取 id，然后过滤 product 数组 以获取匹配的产品。

    <View>
            <Text>
                Cart
            </Text>
            { 
                this.props.carts.forEach(cart => 
                    (<FlatList
                        data={this.props.products.filter(product => product.id === cart.id)}
                        key={cart.id}/>)
                );
            }
        </View>

一些建议：

• 如果是数组，db.json 中的“cart”键应该是“carts”。
• 您应该在产品对象中有另一个字段，例如“cartId”