React Native中如何为API返回的每个条目单独设置Switch组件

核心思路 #

要实现每个条目的Switch独立控制，需将每个条目的Status维护在组件状态中，确保切换操作仅影响对应条目的状态，同时同步回数据集合。

解决方案代码 #

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

export default function App() {
  // 初始化状态，存入API返回结果
  const [items, setItems] = useState([
    {
      Id: "IySO9wUrt8",
      Name: "Los Stand",
      Category: "Mexican",
      Status: true,
    },
    {
      Id: "IySO9wUrt9", // 注意：原示例中Id重复，需确保每个条目Id唯一
      Name: "Los Stand 2",
      Category: "Burger",
      Status: true,
    },
    {
      Id: "IySO9wUrt10",
      Name: "Los Stand 3",
      Category: "BBq",
      Status: true,
    },
  ]);

  // 处理Switch切换事件
  const handleSwitchToggle = (itemId) => {
    setItems(prevItems => 
      prevItems.map(item => 
        item.Id === itemId ? { ...item, Status: !item.Status } : item
      )
    );
    // 此处可添加API调用逻辑，将更新后的Status同步到后端
    // fetch(`/api/update-status/${itemId}`, { 
    //   method: 'POST', 
    //   body: JSON.stringify({ Status: !items.find(i=>i.Id===itemId).Status }) 
    // })
  };

  // 渲染单个条目
  const renderItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <View>
        <Text style={styles.itemName}>{item.Name}</Text>
        <Text style={styles.itemCategory}>{item.Category}</Text>
      </View>
      <Switch
        value={item.Status}
        onValueChange={() => handleSwitchToggle(item.Id)}
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={item.Status ? "#f5dd4b" : "#f4f3f4"}
      />
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={items}
        renderItem={renderItem}
        keyExtractor={item => item.Id} // 必须使用唯一Id作为key
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 16,
  },
  itemContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  itemName: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  itemCategory: {
    fontSize: 14,
    color: '#666',
  },
});

关键说明 #

• 状态管理：用useState存储所有条目，保证每个条目的Status具备响应式特性。
• 唯一Id：必须确保每个条目的Id唯一，否则FlatList的keyExtractor会失效，且切换时无法精准定位目标条目。
• 切换逻辑：通过map遍历原数组，仅更新目标条目的Status，避免误修改其他条目状态。
• 后端同步：在handleSwitchToggle中可加入API调用，将更新后的Status同步到服务器。

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