React Native：Modal组件内checked状态失焦后无法保存如何解决？

问题根源在于你把checked状态放在了FilterItem组件内部，当Modal被隐藏（组件卸载）时，FilterItem会被销毁，内部的useState状态自然会重置。要保留状态，你需要把状态移到更上层的组件或者做持久化存储，下面是两种可行方案：

方案一：状态提升（推荐，适用于临时保留状态） #

将所有筛选项的勾选状态从FilterItem组件提升到Modal的父组件（或Modal本身），通过props传递状态和更新函数给子组件。这样即使Modal隐藏，父组件的状态不会丢失，下次打开Modal时能直接复用。

修改后的FilterItem组件 #

import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { Icon } from '@rneui/themed'

let FilterItem = ({ filter, index, checked, onToggle }) => {
    return (
        <View style={(index != filtersList.length - 1) ? styles.border : styles.noBorder}>
            <TouchableOpacity 
                style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center' }}
                onPress={() => onToggle(filter.id)} // 通过filter的唯一ID定位要切换的项
            >
                {/* 替换成你的misc内容 */}
                <Text>{filter.name}</Text>
                {checked && <Icon name="check" type="font-awesome" />}
            </TouchableOpacity>
        </View>
    )
}

let styles = StyleSheet.create({
    border: {
        borderBottomWidth: 1,
        borderColor: '#e0e0e0',
        paddingVertical: 12,
        paddingHorizontal: 16
    },
    noBorder: {
        paddingVertical: 12,
        paddingHorizontal: 16
    }
    // 你的其他样式
})

export default FilterItem

父组件（管理状态和Modal显示） #

import React, { useState } from 'react'
import { Modal, View, Button, Text } from 'react-native'
import FilterItem from './FilterItem'
import { filtersList } from '../../util/filters'

const ScreenWithFilterModal = () => {
    const [modalVisible, setModalVisible] = useState(false)
    // 初始化所有筛选项的勾选状态，用filter的ID作为键
    const [filterCheckedState, setFilterCheckedState] = useState(
        filtersList.reduce((state, filter) => {
            state[filter.id] = false
            return state
        }, {})
    )

    // 切换指定筛选项的勾选状态
    const toggleFilter = (filterId) => {
        setFilterCheckedState(prevState => ({
            ...prevState,
            [filterId]: !prevState[filterId]
        }))
    }

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Button title="打开筛选面板" onPress={() => setModalVisible(true)} />
            <Text>已选筛选：{Object.keys(filterCheckedState).filter(id => filterCheckedState[id]).length}项</Text>

            <Modal
                visible={modalVisible}
                animationType="slide"
                onRequestClose={() => setModalVisible(false)}
            >
                <View style={{ flex: 1, marginTop: 22 }}>
                    {filtersList.map((filter, index) => (
                        <FilterItem
                            key={filter.id}
                            filter={filter}
                            index={index}
                            checked={filterCheckedState[filter.id]}
                            onToggle={toggleFilter}
                        />
                    ))}
                    <Button title="关闭面板" onPress={() => setModalVisible(false)} />
                </View>
            </Modal>
        </View>
    )
}

export default ScreenWithFilterModal

方案二：持久化存储（适用于需要跨会话保留状态） #

如果希望App重启后仍能保留勾选状态，可以用React Native的AsyncStorage（或更高效的MMKV）来存储状态，在组件初始化时读取，状态变化时保存。

改造父组件添加持久化 #

import React, { useState, useEffect } from 'react'
import { Modal, View, Button, Text } from 'react-native'
import AsyncStorage from '@react-native-async-storage/async-storage'
import FilterItem from './FilterItem'
import { filtersList } from '../../util/filters'

const ScreenWithFilterModal = () => {
    const [modalVisible, setModalVisible] = useState(false)
    const [filterCheckedState, setFilterCheckedState] = useState({})

    // 组件加载时读取本地存储的状态
    useEffect(() => {
        const loadSavedState = async () => {
            const savedData = await AsyncStorage.getItem('filter_checked_state')
            if (savedData) {
                setFilterCheckedState(JSON.parse(savedData))
            } else {
                // 首次加载初始化默认状态
                const initialState = filtersList.reduce((state, filter) => {
                    state[filter.id] = false
                    return state
                }, {})
                setFilterCheckedState(initialState)
            }
        }
        loadSavedState()
    }, [])

    // 状态变化时保存到本地存储
    useEffect(() => {
        const saveState = async () => {
            await AsyncStorage.setItem('filter_checked_state', JSON.stringify(filterCheckedState))
        }
        if (Object.keys(filterCheckedState).length > 0) {
            saveState()
        }
    }, [filterCheckedState])

    const toggleFilter = (filterId) => {
        setFilterCheckedState(prevState => ({
            ...prevState,
            [filterId]: !prevState[filterId]
        }))
    }

    // 其余代码和方案一的父组件一致
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Button title="打开筛选面板" onPress={() => setModalVisible(true)} />
            <Text>已选筛选：{Object.keys(filterCheckedState).filter(id => filterCheckedState[id]).length}项</Text>

            <Modal
                visible={modalVisible}
                animationType="slide"
                onRequestClose={() => setModalVisible(false)}
            >
                <View style={{ flex: 1, marginTop: 22 }}>
                    {filtersList.map((filter, index) => (
                        <FilterItem
                            key={filter.id}
                            filter={filter}
                            index={index}
                            checked={filterCheckedState[filter.id]}
                            onToggle={toggleFilter}
                        />
                    ))}
                    <Button title="关闭面板" onPress={() => setModalVisible(false)} />
                </View>
            </Modal>
        </View>
    )
}

export default ScreenWithFilterModal

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