React-Native React-Navigation Undefined Is Not an Object (Evaluating 'S.Value.Startswith')

TypeError: undefined is not an object (evaluating..)

TypeError: undefined is not an object (evaluating '_this.props.card = card') - React Native with EXPO

The problem is that you're trying to access this in (an arrow function in) a functional component. This isn't allowed.

You mentioned that they use this in their example, but their example is missing a lot of context. Their example code is probably from back when there were only class components (where this was valid to use).

In your case, check the documentation for useRef and perhaps other pages it references. You can use it somewhat like this:

  const cardFlip = useRef();
 
  return (
    <View style={styles.container}>
      <CardFlip style={styles.cardContainer} ref={cardFlip}>
        <TouchableOpacity style={styles.card} onPress={() => cardFlip.current.flip()}>
          <Image source={Front} style={styles.cardContainer}></Image>
        </TouchableOpacity>
        <TouchableOpacity style={styles.card} onPress={() => cardFlip.current.flip()}>
          <Image source={Back} style={styles.cardContainer}></Image>
        </TouchableOpacity>
      </CardFlip>

undefined is not an object (evaluating 'Context._context') - React Native

there is some mistake in your code

1. you are not exporting UserContext but you are importing UserContext
   in App.js file
2. you are trying to use useContext and provider in same file but you
   have to useContext inside of Provider child component
3. you are non_user_stack with first letter capital but you have to
   make first letter capital

UserContext.js : you have to export UserContext in this file

import React, { useState, useEffect } from "react";
import { Text } from 'react-native'
import * as Permissions from "expo-permissions";
import axios from "axios";
import { AsyncStorage } from "react-native";
//import registerForPushNotificationsAsync from "../Hooks/registerForPushNotifications";
import Constants from "expo-constants";

const UserContext = React.createContext();
export default UserContext;
const IS_SIGNEDIN = "is_signed_in";

export const UserProvider = ({ children }) => {
  const [isSignedIn, setSignIn] = useState(null);
  const [didAuthenticate, setAuthenticated] = useState(null);
  const check_and_set_signin_status = async () => {
    const signed_in = await AsyncStorage.getItem(IS_SIGNEDIN);

    if (signed_in == null || signed_in == "false") {
      await AsyncStorage.setItem(IS_SIGNEDIN, "false");
      setSignIn("false");
    } else {
      setSignIn("true");
    }

  };


  return (
    <UserContext.Provider
      value={{
        isSignedIn, // well use this for conditional rendering

        check_and_set_signin_status,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

App.js Code :

const App = () => {
 const { isSignedIn, check_and_set_signin_status } = useContext(UserContext); //<-- causes crash
  console.log( isSignedIn, check_and_set_signin_status ,"useContext")
  return isSignedIn === "false" ? (
    <UserMenu />
  ) : (
    <Non_user_stack></Non_user_stack>
  );
};

const jsx = () => (
  <UserProvider>
    <App />
  </UserProvider>
);

export default jsx;

fetch returns SyntaxError: Unexpected token T in JSON at position 0

This type of error usually happens when your server returns something which is not JSON. In my experience, 99% of the time the server is returning a generic error message. Often times servers will have a generic "catch all" error handler which returns something like:

There was an error processing your request.

In this case, if you tried to use JSON.parse (or res.json() in your case), you would get the error you are experiencing. To see this, paste this into your console:

JSON.parse("There was an error processing your request.")
//-> Uncaught SyntaxError: Unexpected token T in JSON at position 0

Solution 1: Usually the server will set a proper status code whenever there is an error. Check to make sure the response status is 200 before parsing:

fetch('...').then(res => {
  if (res.status !== 200) {
    throw new Error(`There was an error with status code ${res.status}`)
  }
  return res.json()
)

Solution 2: Update your server code to return an error message in JSON format. If you're using node and express, this would look something like this:

function errorHandler (err, req, res, next) {
  if (res.headersSent) return next(err)

  const message = 'There was an error processing your request.'
  res.status(500)
  if (req.accepts('json')) {
    // The request contains the "Accept" header with the value "application/json"
    res.send({ error: message });
    return;
  }
  res.send(message);
}

Then, you would update your frontend code accordingly:

fetch('...')
.then(res => res.json())
.then(res => {
  if (res.error) {
    throw new Error(res.error)
  }
  return res
)

---

Related Topics