React Native中如何传递多选复选框数据至其他屏幕并展示

问题场景 #

在开发React Native应用时，我在SelectProducts屏幕实现了商品复选框选择功能，希望将所有选中商品的item.id、item.ad_headline、item.ad_price、item.ad_picture信息传递到RecordASale屏幕并展示，但当前仅能传递最后一个选中的商品数据，附上相关代码寻求修正方案。

原代码问题分析 #

• includeSelectedItem函数每次触发时，直接用单个商品对象覆盖selectedBoxesItem状态，导致之前选中的商品数据被丢失，最终只保留最后一次选中的项
• 提交时传递的[selectedBoxesItem]本质是把单个对象包装成数组，自然只能展示一个商品

修正方案 #

1. 修改SelectProducts屏幕的选中逻辑 #

调整includeSelectedItem函数，维护一个选中项数组，根据复选框状态添加或移除商品：

import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View, Alert, Image, ScrollView, TouchableOpacity, DataTable } from 'react-native';
import Checkbox from 'expo-checkbox';

const SelectProducts = ({route, navigation}) => { // 补充接收navigation参数
    const [checkedBox, setCheckedBox] = useState([]);
    const [selectedBoxesItem, setSelectedBoxesItem] = useState([]);
    const [itemList, setItemList] = useState([]);

    const includeSelectedItem = (item, index) => {
        const newCheckedBox = [...checkedBox];
        newCheckedBox[index] = !newCheckedBox[index];
        setCheckedBox(newCheckedBox);

        if (newCheckedBox[index]) {
            // 勾选时将商品添加到选中数组
            setSelectedBoxesItem(prev => [...prev, {
                selectedUniqueKey: item.id,
                selectedItemName: item.ad_headline,
                selectedItemPrice: item.ad_price,
                selectedItemPic: item.ad_picture
            }]);
        } else {
            // 取消勾选时从数组中移除对应商品
            setSelectedBoxesItem(prev => prev.filter(itemData => itemData.selectedUniqueKey !== item.id));
        }
    }

    const handleSelectedSubmit = () => {
        navigation.navigate({
            name: 'RecordASale',
            params: {
                post: selectedBoxesItem, // 直接传递完整的选中项数组
            },
            merge: true,
        })
    }

    return (
        <DataTable>
            {itemList.map((item, index) => (
                <DataTable.Row key={item.id}>
                    <DataTable.Cell>
                        <View style={styles.checkboxContainer}>
                            <Checkbox
                                value={checkedBox[index]}
                                onValueChange={() => includeSelectedItem(item, index)}
                                color={checkedBox[index] ? '#800080' : undefined}
                                style={styles.checkbox}
                            />
                        </View>
                    </DataTable.Cell>
                    <DataTable.Cell>
                        <Image source = {{uri: "https://cdn.beraty.com/beraty-ads/"+item.ad_picture}} style = {{ width: 30, height: 30 }} />
                    </DataTable.Cell>
                    <DataTable.Cell>{item.ad_headline}</DataTable.Cell>
                    <DataTable.Cell>{item.ad_price}</DataTable.Cell>
                </DataTable.Row>
            ))}
        
            <View style = {styles.submitButton}>
                <Text style = {styles.submitButtonText} onPress={() => handleSelectedSubmit()}>Done</Text>
            </View>
        </DataTable>
    );
}

const styles = StyleSheet.create({
    checkboxContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    checkbox: {
        marginRight: 8,
    },
    submitButton: {
        marginTop: 20,
        padding: 10,
        backgroundColor: '#800080',
        borderRadius: 5,
        alignItems: 'center',
    },
    submitButtonText: {
        color: 'white',
        fontSize: 16,
    }
});

2. 调整RecordASale屏幕渲染逻辑 #

原代码逻辑无需大改，优化key值和空状态提示：

const RecordASale = ({route}) => {
   return (
       <View>
           {route.params?.post?.length > 0 ? route.params.post.map((item) => (
               <View key={item.selectedUniqueKey}> {/* 用商品唯一ID作为key更稳定 */}
                   <Image source = {{uri: "https://cdn.beraty.com/beraty-ads/"+item.selectedItemPic}} style = {{ width: 30, height: 30 }} />
                   <Text>{item.selectedItemName}</Text>
                   <Text>{item.selectedItemPrice}</Text>
               </View>
           )) : <Text>暂无选中商品</Text>}
       </View>
   );
}

关键修正点说明 #

• 选中状态管理：通过数组维护所有选中项，勾选时添加、取消时过滤移除
• 参数传递：直接传递完整的选中项数组，而非单个对象包装的数组
• 组件key优化：用商品唯一ID作为列表项key，避免索引key导致的渲染异常
• 修复navigation参数缺失：原SelectProducts组件未接收navigation参数，需补充到props中

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