无法对未定义的 属性 'forEach' 作出反应

Question

#React Native 我正在尝试将数据从数组获取到选择器。 Array 毫无问题地将数据发送到选择器，但是当我 select 下拉列表中的一个项目 " 无法反应 属性 'forEach' of undefined This弹出错误

 const ListItem = ({ item, onSubtract, onAdd }) => (
        <View
            style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
            }}>
            <View style={{ flexDirection: 'row', flex: 1, alignItems: 'center' }}>
                <Text style={styles.cardText} >{item.name} - </Text>
                <Text style={styles.cardText} >{item.price}</Text>
            </View>
            <View style={{ flexDirection: 'row', flex: 1, alignItems: 'center' }}>
                <Button title="Subtract" onPress={onSubtract} />
                <Text style={styles.cardText} >{item.quantity}</Text>
                <Button title="Add" onPress={onAdd} />
            </View>
        </View>
    );
    
    const ExistingCustomerScreen = () => {
        const [products, setProducts] = React.useState([
            { _id: 1, name: 'Item 1', price: 50, quantity: 0 },
            { _id: 2, name: 'Item 2', price: 29, quantity: 0 },
            { _id: 3, name: 'Item 3', price: 200, quantity: 0 },
        ]);
    
        const [products2, setProducts2] = React.useState()
    
        const onSubtract = (item, index) => {
            const nextProducts = [...products];
            nextProducts[index].quantity -= 1;
            setProducts(nextProducts);
        };
    
        const onAdd = (item, index) => {
            const nextProducts = [...products];
            nextProducts[index].quantity += 1;
            setProducts(nextProducts);
        };
    
        let totalQuantity = 0;
        let totalPrice = 0;
        products.forEach((item) => {
            totalQuantity += item.quantity;
            totalPrice += item.quantity * item.price;
        });
    
        return (
            <SafeAreaView style={{ flex: 1 }}>
              
    
                <View style={styles.container}>
                    <Picker
                        style={{ color: '#000' }}
                        selectedValue={products}
                        onValueChange={setProducts}
                    >
                        {products !== "" ? (
                            products.map(item => {
                                return <Picker.Item label={item.name} value={item.id} />;
                            })
                        ) : (
                            <Picker.Item label="Loading..." value="0" />
                        )}
                    </Picker>
                </View>
    
    
                <FlatList
                    data={products}
                    renderItem={({ item, index }) => (
                        <ListItem
                            item={item}
                            onSubtract={() => onSubtract(item, index)}
                            onAdd={() => onAdd(item, index)}
                        />
                    )}
                    keyExtractor={(item) => item._id}
                />

            </SafeAreaView>
        )
    }

#React Native 我正在尝试将数据从数组获取到选择器。 Array 毫无问题地将数据发送到选择器，但是当我 select 下拉列表中的一个项目 " 无法反应 属性 'forEach' of undefined This弹出错误

Answer 1

根据代码中的验证检查，您似乎将产品状态设置为非数组值：

products !== ""

因此products.forEach在校验之外会报错

Answer 2

在您的 Picker 组件中，您在 onValueChange 中调用 setProducts。

你基本上是说当值改变时调用 setProducts()，这就是为什么 products 变成 undefined。

您可以考虑添加另一个州，例如 selectedProduct。