CODEWITHSUNDEEP
react-native
letsCode
letsCode

Reputation: 3044

Can not use this.state in render() in react native

Within my componentDidMount function I am doing a fetch() where I store the response in my state.

I am also adding a few other objects like isLoaded: true.

In the render() if I do console.log(this.state.isLoaded); I will get the following error.

TypeError: null is not an object (evaluating 'this.state.isLoaded')

Stack trace:
  App.js:38:27 in render
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11581:21 in finishClassComponent
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11509:4 in updateClassComponent
  ...
ERROR
09:58
Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary

Stack trace:
  node_modules/react-native/Libraries/YellowBox/YellowBox.js:59:8 in error
  node_modules/expo/build/environment/muteWarnings.fx.js:26:24 in error
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:638:36 in warningWithoutStack
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15918:16 in callback
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13857:16 in callCallback
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13901:19 in commitUpdateEffects
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13892:22 in commitUpdateQueue
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15123:10 in commitLifeCycles
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:16636:8 in commitAllLifeCycles
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:93:15 in invokeGuardedCallbackImpl
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:318:36 in invokeGuardedCallback
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:16876:8 in commitRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18501:17 in <unknown>
  node_modules/scheduler/cjs/scheduler.development.js:255:23 in unstable_runWithPriority
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18499:4 in completeRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18427:21 in performWorkOnRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18642:15 in scheduleRootUpdate
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:19512:20 in render
  node_modules/react-native/Libraries/ReactNative/renderApplication.js:61:52 in renderApplication
  node_modules/react-native/Libraries/ReactNative/AppRegistry.js:104:10 in run
  node_modules/react-native/Libraries/ReactNative/AppRegistry.js:198:26 in runApplication
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:366:47 in __callFunction
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue

Otherwise, if I do, console.log(this.state); then the state will print and I will see isLoaded: true in the log on Expo.

What? Why? Why is it not seeing this.state.isLoaded

Upvotes: 0

Views: 241

Answers (1)

AnaGard
AnaGard

Reputation: 133

Maybe you didn't define your state. It should be like this: 

constructor(props){
    super(props);
    this.state = {
        isLoaded: false
    }
}

Upvotes: 5

Related Questions