React Native中useState值未更新、组件不渲染问题求助

核心问题1：useEffect依赖错误导致状态被覆盖 #

你的useEffect把JsonValue作为依赖项，这意味着每次调用setJsonValue更新状态后，useEffect会立即触发readData，从AsyncStorage里读取旧数据重新覆盖状态，所以你修改后的状态瞬间被还原，看起来像是没更新。

核心问题2：状态更新逻辑冗余+潜在的null风险 #

• 手动循环查找索引的方式可以简化，React状态更新推荐用不可变方式创建新数组
• 当AsyncStorage中没有对应数据时，你把状态设为null，后续JsonValue.map会直接报错

修复后的代码 #

import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

function MyScreen({ route }) {
    const dateString = route.params; // 用const替代var，符合规范
    const [jsonValue, setJsonValue] = useState([]); // 初始状态设为空数组，避免null.map报错

    const readData = async () => {
        const storedValue = await AsyncStorage.getItem(dateString);
        const data = storedValue != null ? JSON.parse(storedValue) : []; // 无数据时设为空数组
        setJsonValue(data);
    };

    // 只在dateString变化时读取数据，避免重复覆盖状态
    useEffect(() => {
        readData();
    }, [dateString]);

    return (
        <View>
            {jsonValue.map((item, key) => (
                <View key={key}>
                    <TouchableOpacity 
                        onPress={() => {
                            // 用map创建新数组，不可变更新状态
                            const updatedData = jsonValue.map(i => {
                                if (i.character === item.character) {
                                    return { ...i, bool: !i.bool }; // 直接翻转bool值，无需深拷贝
                                }
                                return i;
                            });
                            setJsonValue(updatedData);
                            // 同步更新AsyncStorage，确保下次进入页面获取最新数据
                            AsyncStorage.setItem(dateString, JSON.stringify(updatedData));
                        }}
                    >
                        <Image source={require('./assets/checkbox.png')} />
                    </TouchableOpacity>
                </View>
            ))}
        </View>
    );
}

关键修改点说明 #

1. 修正useEffect依赖：把依赖从JsonValue改成dateString，只有当页面接收的日期参数变化时，才重新从AsyncStorage读取数据，避免状态被重复覆盖。
2. 优化状态更新逻辑：用map方法创建新数组，直接修改目标项的bool值，代码更简洁且符合React不可变状态的要求。
3. 处理null边界情况：当AsyncStorage无数据时，把状态设为空数组，防止map调用报错。
4. 补充AsyncStorage更新：修改状态后同步更新AsyncStorage，确保下次进入页面能获取最新数据。
5. 命名规范调整：把JsonValue改成小驼峰jsonValue，符合JS变量命名规范。

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