React Native中通过onPress传递函数实现商品列表添加与展示

原代码存在的问题 #

• 未维护商品名称和数量的输入状态，无法获取用户输入内容
• onPress中错误调用userInput()（userInput是状态数组，不是函数）
• FlatList的keyExtractor使用无效属性，renderItem解构错误且用TextInput展示列表项不合理
• 样式引用错误，fontStyle.input应为styles.fontStyle

修正后的完整代码 #

import React, { useState } from 'react';
import { Text, StyleSheet, View, TextInput, Button, FlatList } from 'react-native';

const ItemListScreen = () => {
    // 维护商品列表状态
    const [itemList, setItemList] = useState([]);
    // 维护单个商品的名称和数量输入状态
    const [itemName, setItemName] = useState('');
    const [itemQuantity, setItemQuantity] = useState('');

    // 定义添加商品的函数
    const handleAddItem = () => {
        // 验证输入不为空
        if (itemName.trim() && itemQuantity.trim()) {
            setItemList([
                ...itemList,
                { name: itemName, quantity: itemQuantity, id: Date.now().toString() }
            ]);
            // 清空输入框
            setItemName('');
            setItemQuantity('');
        }
    };

    return (
        <View style={styles.container}>
            <Text>输入商品名称:</Text>
            <TextInput
                style={styles.input}
                value={itemName}
                onChangeText={setItemName}
                placeholder="例如: 苹果"
            />

            <Text>输入数量:</Text>
            <TextInput
                style={styles.input}
                value={itemQuantity}
                onChangeText={setItemQuantity}
                keyboardType="numeric"
                placeholder="例如: 5"
            />

            <Button title="添加商品" onPress={handleAddItem} />

            <FlatList
                keyExtractor={(item) => item.id}
                data={itemList}
                renderItem={({ item }) => (
                    <View style={styles.listItem}>
                        <Text style={styles.fontStyle}>商品: {item.name}</Text>
                        <Text style={styles.fontStyle}>数量: {item.quantity}</Text>
                    </View>
                )}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 15,
    },
    input: {
        marginVertical: 10,
        borderColor: 'black',
        borderWidth: 1,
        padding: 8,
    },
    fontStyle: {
        fontSize: 18,
        marginVertical: 4,
    },
    listItem: {
        marginVertical: 10,
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
});

export default ItemListScreen;

关键修正说明 #

• 状态管理：新增itemName和itemQuantity单独维护输入值，确保能获取用户输入；itemList存储已添加的商品数组，每个商品包含唯一id用于FlatList的keyExtractor。
• 添加函数传递：将添加逻辑封装到handleAddItem函数，直接在onPress中引用该函数，函数内验证输入合法性后更新列表，并清空输入框。
• FlatList优化：用商品的id作为唯一标识，renderItem解构item后用Text展示商品信息，替换原错误的TextInput。
• 样式调整：新增容器样式和列表项样式，优化布局体验；修正样式引用路径，确保样式生效。

内容的提问来源于stack exchange，提问作者Michael