TypeError: null is not an object (evaluating 'storagedTechs.split')

Question

I'm getting the following error: Possible unhandled promise rejection (id:0: Network request failed) sometimes the error id change for id:3. can anybody help me?

import React, {useState, useEffect} from 'react'; import { SafeAreaView, StyleSheet, Image, AsyncStorage } from 'react-native';

import SpotList from '../components/SpotList';

import logo from '../assets/logo.png';

export default function List () {

const [techs, setTechs] = useState ([]);


useEffect(() => {
    AsyncStorage.getItem('techs')
        .then((storagedTechs) => {
            const techsArray = storagedTechs.split(',').map(tech => tech.trim())

            setTechs(techsArray)
        })
},[]);


return (
    <SafeAreaView style={styles.container}>
        <Image style={styles.logo} source={logo}/>

        {techs.map(tech => <SpotList key={tech} tech={tech}/>)}
    </SafeAreaView>
)

}

const styles = StyleSheet.create ({ container: { flex: 1,

},
logo: {
    height: 32,
    resizeMode: 'contain',
    alignSelf:'center',
    marginTop: 50
},

})

error in expo go

Answer 1

I would have tried adding catch block after then block, like

.then((storagedTechs) => {
    const techsArray = storagedTechs.split(',').map(tech => tech.trim())

    setTechs(techsArray)
})
.catch(err => {
    if (err) console.error(err);
});

This will help you in further debugging.