[Unhandled promise rejection: TypeError: null is not an object (evaluating 'as.user')]-CodePudding

I have been working on a react native application Audit 5s . It has its own node.js backend While in my application when I try to sign up or sign in ( send) the users to my database, I get this error "Possible unhandled promise rejection (id:0) null is not an object"

Here is my auths.js file

import React, { useState, useEffect, createContext } from "react";
import axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { API } from "../confing";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [state, setState] = useState({
    user: null,
    token: "",
  });

  // config axios
  axios.defaults.baseURL = API;

  useEffect(() => {
    const loadFromAsyncStorage = async () => {
      let data = await AsyncStorage.getItem("@auth");
      const as = JSON.parse(data);
      setState({ ...state, user: as.user, token: as.token });
    };
    loadFromAsyncStorage();
  }, []);

  return (
    <AuthContext.Provider value={[state, setState]}>
      {children}
    </AuthContext.Provider>
  );
};

export { AuthContext, AuthProvider };

and here is the error

[Unhandled promise rejection: TypeError: null is not an object (evaluating 'as.user')]
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:null in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:null in <anonymous>
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:null in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:null in invoke
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:null in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue

[https://i.stack.imgur.com/APfEB.png][1]

CodePudding user response：

The problem is that typescript does not know whether you have data returned in as or if its null. A possible solution would be to check first:

let data = await AsyncStorage.getItem("@auth");
const as = JSON.parse(data);
if (as !== null && as.user && as.token) {
  setState({ ...state, user: as.user, token: as.token });
}

Another solution would be to make sure that Typescript knows as will always have value with ! (not recommended if it can be null):

let data = await AsyncStorage.getItem("@auth");
const as = JSON.parse(data);
setState({ ...state, user: as!.user, token: as!.token });