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

Question

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

我无法使用当前代码。

我已将我的代码简化到最低限度以提高可读性。

    <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
        }
    ]

当前结果是一个空的 Flatlist。 预先感谢您的任何反馈。

Answer 1

据我了解，您想要显示购物车及其对应产品的列表。因此，您可以迭代 购物车数组 以获取 ID，然后过滤 产品数组 以获取匹配的产品。

    <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”

Answer 2

您在 '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 片段运行，因此您可以在下面看到它的实际效果。

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)

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

Trying to filter an array of objects with another array of objects

reactjs

react-native

react-redux

shopping-cart