React Native中expo-checkbox循环渲染多选及取值问题求助

你的代码存在几个核心问题，导致多选失效、取值异常，以下是具体问题分析和修复后的完整实现：

核心问题分析 #

1. 选中状态被频繁重置：每次点击复选框时，你新建了空数组let checkedBox = []，直接清空了之前所有选中记录，自然只能单选。
2. 状态初始化与更新逻辑错误：初始checkedBox是空数组，未与itemList长度匹配，导致checkedBox[index]常为undefined，取反和赋值逻辑失效。
3. 复选框颜色判断错误：color={checkedBox ? '#800080' : undefined}中使用了整个数组而非当前项的选中状态，颜色不会正确变化。
4. 缺少选中数据收集与返回逻辑：未处理选中商品的信息整合，也没实现返回上一页并传递数据的功能。

修复后的完整代码 #

import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Checkbox from 'expo-checkbox';

const SelectProducts = ({ route, navigation }) => {
  // 示例商品列表（实际可从路由参数/接口获取）
  const [itemList, setItemList] = useState([
    { id: 1, name: '商品A', price: 100, image: 'https://example.com/a.jpg' },
    { id: 2, name: '商品B', price: 200, image: 'https://example.com/b.jpg' },
    { id: 3, name: '商品C', price: 150, image: 'https://example.com/c.jpg' },
  ]);
  // 初始化选中状态数组，与商品列表长度匹配，默认全未选中
  const [checkedBox, setCheckedBox] = useState([]);

  // 商品列表加载完成后，同步初始化选中状态
  useEffect(() => {
    if (itemList.length > 0) {
      setCheckedBox(new Array(itemList.length).fill(false));
    }
  }, [itemList]);

  // 切换单个复选框状态
  const toggleCheckbox = (index) => {
    // 复制原数组，避免直接修改状态
    const newCheckedState = [...checkedBox];
    newCheckedState[index] = !newCheckedState[index];
    setCheckedBox(newCheckedState);
  };

  // 筛选所有选中的商品
  const getSelectedProducts = () => {
    return itemList.filter((_, index) => checkedBox[index]);
  };

  // 返回上一页并传递选中数据
  const confirmSelection = () => {
    const selectedItems = getSelectedProducts();
    // 传递数据至上一页，可根据路由方式调整为navigate
    navigation.setParams({ selectedProducts: selectedItems });
    navigation.goBack();
  };

  return (
    <ScrollView style={styles.container}>
      {itemList.map((item, index) => (
        <View key={item.id} style={styles.itemRow}>
          <Checkbox
            value={checkedBox[index] || false} // 兜底处理未初始化的情况
            onValueChange={() => toggleCheckbox(index)}
            color={checkedBox[index] ? '#800080' : undefined} // 根据当前项状态设置颜色
            style={styles.checkbox}
          />
          <View style={styles.productCard}>
            <Image source={{ uri: item.image }} style={styles.productImg} />
            <View style={styles.productInfo}>
              <Text style={styles.productName}>{item.name}</Text>
              <Text style={styles.productPrice}>¥{item.price}</Text>
            </View>
          </View>
        </View>
      ))}
      <TouchableOpacity style={styles.confirmBtn} onPress={confirmSelection}>
        <Text style={styles.btnText}>确认选择</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  itemRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  checkbox: {
    marginRight: 12,
  },
  productCard: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    backgroundColor: '#fff',
    borderRadius: 8,
  },
  productImg: {
    width: 60,
    height: 60,
    borderRadius: 8,
    marginRight: 12,
  },
  productInfo: {
    flex: 1,
  },
  productName: {
    fontSize: 16,
    fontWeight: '500',
  },
  productPrice: {
    fontSize: 14,
    color: '#f44336',
    marginTop: 4,
  },
  confirmBtn: {
    backgroundColor: '#800080',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 20,
  },
  btnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
});

export default SelectProducts;

关键修复说明 #

• 保留选中状态：通过复制原数组[...checkedBox]后再修改，避免清空之前的选中记录，实现多选。
• 同步状态初始化：用useEffect在商品列表加载完成后，生成对应长度的布尔数组，解决undefined问题。
• 兜底处理状态值：value={checkedBox[index] || false}确保复选框始终有合法的选中状态值。
• 数据收集与传递：通过getSelectedProducts筛选选中商品，再用navigation.setParams传递至上一页，上一页可通过route.params.selectedProducts接收数据用于计算总价。

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