React Native 0.60.4跳转登录页触发ReferenceError: state未找到

Hey there, let's break down why this crash is popping up after your password reset redirect—especially since your code worked perfectly in older versions. The error points to a missing state variable, and here are the most likely fixes based on version changes and common pitfalls:

1. Double-check state references in your Login component #

This is the most probable culprit. In class components, state is an instance property, so you must reference it as this.state—never just state.

Older versions of React Native/react-native-router-flux might have been more lenient with accidental omissions of this., but React Native 0.60+ uses stricter Babel transforms that throw a ReferenceError immediately when state is used without this..

Go through your Login component's render method, event handlers, and lifecycle methods (except the constructor where you initialize this.state = {...}) to ensure every state access uses this.state.yourValue. For example:

// Wrong
<TextInput value={state.username} />

// Correct
<TextInput value={this.state.username} />

2. Verify react-native-router-flux navigation logic #

Between the beta (^4.0.0-beta.28) and stable (4.0.6) versions of react-native-router-flux, there were key changes to navigation stack management.

When redirecting after password reset, try using Actions.reset('login') instead of Actions.login() to clear the navigation stack and ensure the Login component mounts fresh. This avoids leftover state or component instance issues from the previous screen:

// After password reset is successful
Actions.reset('login');

3. Fix potential Babel or cache issues #

React Native 0.60+ introduced auto-linking and updated Babel presets, which can sometimes cause cached code to interfere. Try these steps:

• Close the Metro Bundler and restart it with a cache reset:

  npx react-native start --reset-cache
  

• Clean your project's build folders:
  • For iOS: cd ios && pod deintegrate && pod install && cd ..
  • For Android: cd android && ./gradlew clean && cd ..
• Disable Hot Reload temporarily to rule out cached component state.

4. Check component lifecycle and this binding #

Ensure your Login component's constructor properly initializes state and binds any custom methods (if you're not using arrow functions for handlers):

constructor(props) {
  super(props);
  this.state = {
    username: '',
    password: '',
    // Your other state variables
  };
  // Bind methods if needed
  this.handleLogin = this.handleLogin.bind(this);
}

Arrow function handlers automatically bind this, so if you're using those, you shouldn't have issues—but double-check that you're not accidentally losing this context in any nested functions.

内容的提问来源于stack exchange，提问作者RAVI RAJPUT