启动React Native应用遇Reference Error：找不到变量error求排查

This error pops up when your code tries to use a variable named error that hasn't been declared anywhere. Let's break down the most likely places to look for this issue, based on the code you shared:

1. Check Your Reducer Files (e.g., leaders.js, dishes.js) #

The most common culprit here is mishandling error states in your reducers. For example, if you're handling a *_FAILED action type and accidentally use an undeclared error variable instead of action.payload:

Wrong:

case ActionTypes.LEADERS_FAILED:
  return {...state, isLoading: false, errMess: error.message}; // `error` isn't defined here!

Correct:

case ActionTypes.LEADERS_FAILED:
  return {...state, isLoading: false, errMess: action.payload}; // Use the payload from your action

When you dispatch a *_FAILED action, you should pass the error message as the payload—so your reducer needs to reference that payload, not an undefined error variable.

2. Check Your Action Creator Functions #

You mentioned your ActionCreators.js file has store configuration code (that should probably be in configureStore.js), so I assume you have separate action creators for fetchDishes, fetchLeaders, etc. Double-check those functions for missing error declarations in catch blocks:

Wrong:

.catch(() => dispatch(leadersFailed(error.message))) // `error` isn't declared in the catch params

Correct:

.catch((error) => dispatch(leadersFailed(error.message))) // Declare `error` as a catch parameter

If you omit the error parameter in the catch block, trying to use error inside it will throw exactly the reference error you're seeing.

3. Scan Component Files for Accidental error Usage #

Quickly check all your components (like AboutComponent.js, DishDetailComponent.js) for any place you might have typed error instead of the intended variable (like this.props.leaders.errMess). For example, if you had a typo like:

<Text>{error}</Text> // Oops, should be this.props.leaders.errMess

That would trigger the same error.

Example Fix for a Leaders Reducer #

Here's how a properly structured leaders.js reducer should look to avoid this error:

import * as ActionTypes from './ActionTypes';

export const leaders = (state = {
    isLoading: true,
    errMess: null,
    leaders: []
}, action) => {
    switch (action.type) {
        case ActionTypes.ADD_LEADERS:
            return {...state, isLoading: false, errMess: null, leaders: action.payload};

        case ActionTypes.LEADERS_LOADING:
            return {...state, isLoading: true, errMess: null, leaders: []};

        case ActionTypes.LEADERS_FAILED:
            return {...state, isLoading: false, errMess: action.payload};

        default:
            return state;
    }
};

Start by checking your reducer files first—this is where this error most often occurs in Redux apps. If that doesn't fix it, move on to verifying your action creators.

内容的提问来源于stack exchange，提问作者Syed BilawalHassan