如何在React Native的FlatList中修改单个Switch组件的值？

你当前的问题根源在于所有Switch组件共享了同一个isEnabled状态变量，导致切换任何一个Switch时，所有组件都会同步变化。要实现单独控制每个Switch，需要将每个Switch的状态绑定到对应列表项自身的属性上，通过管理列表数据的状态来实现独立控制。

修改步骤： #

• 用useState管理列表数据：将静态的listData转为可修改的状态数组，这样可以更新单个列表项的Switch状态
• 更新切换函数：根据列表项的唯一标识（这里用key）找到对应条目，切换其switch属性值
• 修正keyExtractor：原代码使用item.id但数据中不存在该字段，改为使用item.key作为唯一标识
• 绑定Switch到对应项的状态：将Switch的value设为当前项的switch值，onValueChange触发时传递当前项的key

修改后的完整代码： #

import { useState } from 'react';
import { View, Text, TextInput, FlatList, Image, Switch, TouchableOpacity, StyleSheet } from 'react-native';

// 假设styles和limits已定义
const YourComponent = ({ limits, onChangeLimit }) => {
  const [listData, setListData] = useState([
    { img: require("../../../assets/deposit.png"), key: "Pizza", switch: false },
    { img: require("../../../assets/deposit.png"), key: "Ice Cream", switch: false },
    { img: require("../../../assets/deposit.png"), key: "Hamburger", switch: false },
    { img: require("../../../assets/deposit.png"), key: "Sandvic", switch: false },
  ]);

  const toggleSwitch = (itemKey) => {
    setListData(prevData => 
      prevData.map(item => 
        item.key === itemKey ? { ...item, switch: !item.switch } : item
      )
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.spendingLimitView}>
        <Text style={styles.dailyspendingText}>Daily Spending Limit: currently {limits.dailySpendingLimit}</Text>
        <TextInput style={styles.limitInput} placeholder="$" onChangeText={(limit) => onChangeLimit(limit)} />
      </View>
      <View style={styles.foodsContainer}>
        <Text style={styles.foodsText}>Foods</Text>
        <View style={styles.limitsListContainer}></View>
        <FlatList
          style={styles.listContainer}
          data={listData}
          keyExtractor={(item) => item.key}
          renderItem={({ item }) => (
            <View style={styles.foodlist}>
              <Image source={item.img} />
              <Text style={styles.item}>{item.key}</Text>
              <Switch 
                onValueChange={() => toggleSwitch(item.key)}
                value={item.switch} 
              />
            </View>
          )}
        />
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.saveButton}>
          <Text style={styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default YourComponent;

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