React native 该代码一次激活所有开关。我一次只需要一个开关

我不断地遇到一个错误，我是新的反应。有人给出可能的解决方案吗

    import React from 'react'
    import {StyleSheet, View,Text, Switch, Button, Alert, ScrollView, FlatList, SafeAreaView} from 'react-native'
    
    export default () => {
        const [isSwitchEnabled, setSwitch] = React.useState(false)
        const toggleSwitch = () => setSwitch(previousState => !previousState);
        const DATA = [
            {
                id: '1',
                title: 'Toggle Night Mode',
                switch: false
            },
            {
                id: '2',
                title: 'Remind me to take a break',
                switch: false
            },
            {
                id: '3',
                title: "Remind me when it's bedtime",
                switch: false
            },
    
        ];
    
        function Item({title}){
            return (
                <View>
                    <Text style={styles.text}> {title} </Text>
                    <Switch 
    
                    onValueChange= {toggleSwitch}
                    trackColor={{ false: "#767577", true: "#81b0ff" }}
                    thumbColor="#f5dd4b"
                    ios_backgroundColor="#3e3e3e"
                    value= {isSwitchEnabled}
                    />
                </View>
            )
        }
    
    
    
    
        function Header(){
            return(
                <View style = {styles.header}>
                    <Text style={styles.headertext}>Settings</Text>
                </View>
            )
        }
        
        return (
            <>
            <View>
                <SafeAreaView style ={styles.container}>
                    <FlatList
                        data = {DATA}
                        keyExtractor = {item => item.id}
                        renderItem = {( {item} ) => <Item title = {item.title}/> }
                        ListHeaderComponent = {Header()}
                    />
                </SafeAreaView>
            </View>
            <View> 
                <Button 
                title = "Clear Search History" 
                color = "#6fb6f0"    
                onPress = {() => Alert.alert('Food History Has Been Cleared!')}
                />
            </View>
            <View> 
                <Button 
                title = "Logout" 
                color = "#6fb6f0"    
                onPress = {() => Alert.alert('Successfully Logged Out!')}
                />
            </View>
    
            </>
        
        );
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#fff',
            alignItems: 'center',
            justifyContent: 'center',
        },
        text: {
            fontSize: 20,
            fontWeight: "300"
        },
        headertext: {
            fontSize: 30,
            fontWeight: "300"
        },
        header:{
            flex:1,
            justifyContent: 'center',
            alignItems: 'center',
            padding: 10,
            backgroundColor: '#f5f5f5'
        }
    })

从“React”导入React
从“react native”导入{样式表、视图、文本、开关、按钮、警报、滚动视图、平面列表、安全区域视图}
导出默认值（）=>{
常量[isSwitchEnabled，setSwitch]=React.useState（false）
常量切换开关=（）=>设置开关（previousState=>！previousState）；
常数数据=[
{
id:'1'，
标题：“切换夜间模式”，
开关：错误
},
{
id:'2'，
标题：“提醒我休息一下”，
开关：错误
},
{
id:'3'，
标题：“睡觉时间提醒我”，
开关：错误
},
];
函数项（{title}）{
返回(
{title}
)
}
函数头（）{
返回(
设置
)
}
返回(
项目id}
renderItem={（{item}）=>}
ListHeaderComponent={Header（）}
/>
Alert.Alert（'食品历史记录已清除！'）}
/>
Alert.Alert（'成功注销！'）}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
正文：{
尺寸：20，
重量：“300”
},
标题文字：{
尺寸：30，
重量：“300”
},
标题：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
填充：10，
背景颜色：“#F5”
}
})

---

您将每个项目附加到一个状态，因此所有项目都会根据该状态的变化而变化。要修复它，请使每个项成为具有内部状态的组件以控制它，或者为数据对象中的每个项动态创建不同的状态。您必须为每个项目创建不同的状态。

试试这种方法

import React from 'react'
import {StyleSheet, View,Text, Switch, Button, Alert, ScrollView, FlatList, SafeAreaView} from 'react-native'
    
    export default () => { 

    // use data set in default state
    const [data, setData] = React.useState([
            {
                index: 1,
                title: 'Toggle Night Mode',
            },
            {
                index: 2,
                title: 'Remind me to take a break',
            },
            {
                index: 3,
                title: "Remind me when it's bedtime",
            },
    
        ]);

        function toggleSwitch(value, index){

      const newData = [...data];
      const newData[index].isEnable = value;
      setData(newData);

    }

        function Item({item, index}) {
            return (
                <View>
                    <Text style={styles.text}> {item.title} </Text> // use `title` here like this
                    <Switch    
                        .....
                        value={item.isEnable || false} // change here
                        onValueChange={(value) => toggleSwitch(value, index) } // change here
                    />
                </View>
            )
        } 
        
        return (
            <>
            <View style = {styles.container}>
                <FlatList
                    data = {data}
                    keyExtractor = {item => item.id}
                    renderItem = {({ item, index }) => <Item item={item} index={index} /> } // send `item` as prop
                />

            </View>    
            </>
        
        );
    }

从“React”导入React
从“react native”导入{样式表、视图、文本、开关、按钮、警报、滚动视图、平面列表、安全区域视图}
导出默认值（）=>{
//在默认状态下使用数据集
const[data，setData]=React.useState([
{
索引：1，
标题：“切换夜间模式”，
},
{
索引：2，
标题：“提醒我休息一下”，
},
{
索引：3，
标题：“睡觉时间提醒我”，
},
]);
功能切换开关（值、索引）{
const newData=[…data]；
const newData[index].isEnable=value；
setData（newData）；
}
函数项（{Item，index}）{
返回(
{item.title}//像这样在这里使用'title'
toggleSwitch（值，索引）}//在此处更改
/>
)
} 
返回(
项目id}
renderItem={（{item，index}）=>}//将`item`作为属性发送
/>
);
}

这样做：

const Item=（{data}）=>{
const[isSwitchEnabled，toggleSwitch]=React.useState（data.switch）
返回(
{data.title}
切换开关（！isSwitchEnabled）}
trackColor={{false:#767577]，true:#81b0ff}}
thumbColor=“#f5dd4b”
ios#u backgroundColor=“#3e3e”
值={isSwitchEnabled}
/>
)
}
导出默认值（）=>{
常数数据=[
{
id:'1'，
标题：“切换夜间模式”，
开关：错误
},
{
id:'2'，
标题：“提醒我休息一下”，
开关：错误
},
{
id:'3'，
标题：“睡觉时间提醒我”，
开关：错误
},
];
函数头（）{
返回(
设置
)
}
返回(
项目id}
renderItem={（{item}）=>}
ListHeaderComponent={Header（）}
contentContainerStyle={styles.container}
/>
Alert.Alert（'食品历史记录已清除！'）}
/>
Alert.Alert（'成功注销！'）}
/>
);
}

谢谢，但是您能告诉我如何将useState钩子的值更改为数组吗？或者如何使每个项目成为一个组件？