React Native运行报错null is not an object (evaluating 'teachers.length')如何解决

报错null is not an object (evaluating 'teachers.length')的核心原因是teachers变量被设置为了null，导致访问其length属性时抛出异常，具体触发点在你的teachersList异步函数逻辑漏洞：

• 当AsyncStorage.getItem('@teachers_list')返回空值（即storedValue为null）时，你在if (!storedValue)分支中设置了setTeachers([])，但分支后没有加return终止执行，后续代码仍然会执行JSON.parse(storedValue)，JSON.parse(null)的返回结果就是null，随后setTeachers(list)会把之前设置的空数组直接覆盖为null。
• 你之前加的teachers && (业务代码)判断没有生效，是因为报错触发在更早的teachers.length判断逻辑中，还没走到你加的非空判断位置就已经抛出异常。

1. 修正异步获取逻辑的分支漏洞 #

在if (!storedValue)分支执行完成后添加return终止后续代码，同时增加异常捕获和类型校验，避免存储内容非法导致的异常：

const teachersList = async () => {
    setLoading(true);
    try {
        const storedValue = await AsyncStorage.getItem('@teachers_list');
        if (!storedValue) {
            setTeachers([]);
            setLoading(false);
            return;
        }
        const list = JSON.parse(storedValue);
        // 额外校验解析结果是否为数组，避免非法存储值导致问题
        setTeachers(Array.isArray(list) ? list : []);
        setLoading(false);
    } catch (err) {
        // 解析异常时兜底设置为空数组
        setTeachers([]);
        setLoading(false);
    }
}

2. 渲染层增加安全判断 #

使用可选链运算符?.访问length属性，就算teachers意外为null也不会直接抛出异常：

{teachers?.length === 0 ? (
    <View style={styles.noData}>
        <Text>Teacher List Empty</Text>
    </View>
) : (
    <>
        {
            teachers?.map((teacher) => (
                <View key={teacher.id} style={styles.productContainer} >
                    <View style={styles.productDetails}>
                        <Text> Name : {teacher.name}</Text>
                        <Text> Subject : {teacher.subject}</Text>
                        <Text> Email : {teacher.email}</Text>
                    </View>
                    <View style={styles.productButtonContainer}>
                        <TouchableOpacity style={styles.productActionEditButton} onPress={() => navigation.navigate("Edit", { teacher })}>
                            <Text> Edit </Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.productActionDelButton} onPress={() => deleteTeacher(teacher.id)}>
                            <Text> Delete </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            ))
        }
    </>
)}

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