React Native答题App状态未定义报错处理及优化方案咨询

一、先解决当前「Cannot read property 'key' of undefined」错误 #

错误核心：allselectedOption是数组结构，你用allselectedOption[item.Quetion_Number]直接按索引取值时，若没有对应项会得到undefined，后续访问.key就触发类型错误。

修改QuestionApi里的逻辑，先匹配对应题目选中项再处理：

const QuestionApi = async () => {
    const response = await fetch('api.php?table=demo');
    const data = await response.json();
    setAllQuestion(data);
    
    try {
        const result = data?.map((item) => {
            // 先找到当前题目对应的选中记录
            const matchedOption = allselectedOption.find(opt => opt.key === item.Quetion_Number);
            return {
                ...item,
                selectedOP: matchedOption ? 
                    // 存在则判断答案是否正确
                    matchedOption.values === item.correct_option : 
                    // 不存在则标记为未作答
                    null
            }
        })
        console.log(result)
    } catch (e) {
        console.log(e)
    }
}

二、现有代码的优化方案 #

1. AsyncStorage 异步逻辑重构 #

原回调嵌套写法可读性差，换成Promise风格更简洁，同时把数组转成对象格式，后续查找效率更高：

// evalutionmode.js 代码修改
const [selectedOption, setSelectedOption] = useState({});

useEffect(() => {
    const loadSelectedOptions = async () => {
        try {
            const keys = await AsyncStorage.getAllKeys();
            const stores = await AsyncStorage.multiGet(keys);
            // 转成键值对对象，键为题目编号，值为选中选项
            const optionObj = stores.reduce((acc, [key, value]) => {
                acc[key] = value;
                return acc;
            }, {});
            setSelectedOption(optionObj);
        } catch (err) {
            console.error('加载选中选项失败:', err);
        }
    };
    loadSelectedOptions();
}, []);

2. 结果页状态与逻辑优化 #

• 接收对象格式的选中项，避免数组遍历查找的低效问题
• 修正useEffect无效依赖（原[1]会导致重复执行，换成空依赖只执行一次）
• 简化答案判断逻辑

修改QuizResult.js：

const QuizResult = ({ navigation, route }) => {
    // 接收对象格式的选中项数据
    const [allselectedOption, setAllselectedOption] = useState(route.params.selectedOP);
    const [allQuestion, setAllQuestion] = useState([]);

    useEffect(() => {
        QuestionApi();
    }, []);

    const QuestionApi = async () => {
        const response = await fetch('api.php?table=demo');
        const data = await response.json();
        setAllQuestion(data);
        
        const result = data?.map((item) => ({
            ...item,
            // 直接通过题目编号快速获取选中值，不存在则标记未作答
            selectedOP: allselectedOption[item.Quetion_Number] ? 
                allselectedOption[item.Quetion_Number] === item.correct_option : 
                null
        }));
        console.log(result);
    }

    // 后续渲染逻辑...
}

3. 额外注意事项 #

• 统一存储键的格式：把题目编号转成字符串存储到AsyncStorage，避免数字/字符串类型不匹配导致查找失败
• 跳转结果页前加加载状态：确保AsyncStorage数据加载完成再跳转，避免结果页拿到空数据
• 修正拼写错误：salectedOption→selectedOption、nevigation→navigation、Quetion_Number→Question_Number，避免隐性bug

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