React Native运行报错Reference error: can't find variable: error求助

执行npx react-native run-android时出现Reference error: can't find variable: error错误，此前代码运行正常，重启开发后突然出现。已尝试react-native link、./gradlew clean、npm install等操作无效。项目为跟随旧版YouTube教程开发的CoinGecko数据获取应用，相关代码如下：

marketReducer.js #

import { ActionSheetIOS } from 'react-native';
import * as marketActions from './marketActions';

const initialState = {
    myHoldings: [],
    coins: [],
    error: null,
    loading: false
}

const marketReducer = (state = initialState, action) => {
    switch (action.type) {
        case marketActions.GET_HOLDINGS_BEGIN:
            return {
                ...state,
                loading: true
            }
        case marketActions.GET_HOLDINGS_SUCCESS:
            return {
                ...state,
                myHoldings: action.payload.myHoldings
            }
        case marketActions.GET_HOLDINGS_FAILURE:
            return {
                ...state,
                error: action.payload.error
            }
        case marketActions.GET_COIN_MARKET_BEGIN:
            return {
                ...state,
                loading: true
            }
        case marketActions.GET_COIN_MARKET_SUCCESS:
            return {
                ...state,
                coins: action.payload.coins
            }
        case marketActions.GET_COIN_MARKET_FAILURE:
            return {
                ...state,
                error: action.payload.error
            }
        default:
            return state
    }
}

marketActions.js #

import axios from "axios";
    
    
    export const GET_HOLDINGS_BEGIN = "GET_HOLDINGS_BEGIN"
    export const GET_HOLDINGS_SUCCESS = "GET_HOLDINGS_SUCCESS"
    export const GET_HOLDINGS_FAILURE = "GET_HOLDINGS_FAILURE"
    export const GET_COIN_MARKET_BEGIN = "GET_COIN_MARKET_BEGIN"
    export const GET_COIN_MARKET_SUCCESS = "GET_COIN_MARKET_SUCCESS"
    export const GET_COIN_MARKET_FAILURE = "GET_COIN_MARKET_FAILURE"
    
    //Holding / My Holdings
    
    export const getHoldingsBegin = () => ({
        type: GET_HOLDINGS_BEGIN
    })
    
    export const getHoldingsSuccess = (myHoldings) => ({
        type: GET_HOLDINGS_SUCCESS,
        payload: { myHoldings }
    });
    
    export const getHoldingsFailure = (error) = ({
        type: GET_HOLDINGS_FAILURE,
        payload: { error }
    })
    
    export function getHoldings(holdings = [], currency = "usd", orderBy = "market_cap_desc", sparkline = true, priceChangePerc = "7d", perPage = 10, page = 1) {
    
        return dispatch => {
            dispatch(getHoldingsBegin())
    
            let ids = holdings.map((item) => { return item.id }).join(",");
            let apiUrl = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=${orderBy}&per_page=${perPage}&page=${page}&sparkline=${sparkline}&price_change_percentage=${priceChangePerc}&ids=${ids}`
    
            return axios({
                url: apiUrl,
                method: 'GET',
                header: {
                    Accept: "application/json"
                }
            }).then((response) => {
                console.log("GetHoldings")
                console.log(response)
                if (response.state == 200) {
                    //Massage data
                    let myHoldings = response.data.map((item) => {
                        //Retrieve our current holdings -> current quantity
                        let coin = holdings.find(a => a.id == item.id)
    
                        //Price from 7 days ago
                        let price7d = item.current_price / (1 + item.price_change_percentage_7d_in_currency * 0.01)
    
                        return {
                            id: item.id,
                            symbol: item.symbol,
                            name: item.name,
                            img: item.image,
                            current_price: item.current_price,
                            price_change_percentage_7d_in_currency: item.price_change_percentage_7d_in_currency,
                            holding_value_change_7d: (item.current_price - price7d) * coin.qty,
                            sparkline_in_7d: {
                                value: item.sparkline_in_7d.price.map((price) => {
                                    return price * coin.qty
                                })
                            }
                        }
                    })
    
                    dispatch(getHoldingsSuccess(myHoldings))
                } else {
                    dispatch(getHoldingsFailure(response.data));
                }
            }).catch((error) => { dispatch(getHoldingsFailure(error)); });
        }
    
    }
    
    // Coin Market
    
    export const getCoinMarketBegin = () => ({
        type: GET_COIN_MARKET_BEGIN
    })
    
    export const getCoinMarketSuccess = (coins) => ({
        type: GET_COIN_MARKET_SUCCESS,
        payload: { coins }
    })
    
    export const getCoinMarketFailure = (error) => ({
        type: GET_COIN_MARKET_FAILURE,
        payload: { error }
    })
    
    export function getCoinMarket(currency = "usd", orderBy = "market_cap_desc", sparkline = true, priceChangePerc = "7d", perPage = 10, page = 1) {
    
        return dispatch => {
            dispatch(getCoinMarketBegin())
    
            let apiUrl = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=${orderBy}&per_page=${perPage}&page=${page}&sparkline=${sparkline}&price_change_percentage=${priceChangePerc}
            `
    
            return axios({
                url: apiUrl,
                method: 'GET',
                header: {
                    Accept: 'application/json'
                }
            }).then((response) => {
                if (response.state == 200) {
                    dispatch(getCoinMarketSuccess(response.data))
                }else{
                    dispatch(getCoinMarketFailure(response.data))
                }
            }).catch((error) => {
                dispatch(getCoinMarketFailure(error))
            })
    
        }
    
    }

核心错误原因 #

1. 语法错误导致变量未定义：marketActions.js中getHoldingsFailure函数的箭头函数语法错误，将=>写成了=，导致JavaScript无法识别参数error，直接抛出未定义错误。
2. 其他潜在问题：
   • Axios请求配置中header应为复数headers，否则请求头无法正确设置
   • 判断请求成功的条件应为response.status而非response.state，Axios响应对象不存在state属性
   • getCoinMarket函数中的API URL末尾有多余换行空格，会导致请求地址无效

修复步骤 #

1. 修正getHoldingsFailure的箭头函数语法：

export const getHoldingsFailure = (error) => ({
    type: GET_HOLDINGS_FAILURE,
    payload: { error }
})

2. 将两处Axios请求中的header改为headers：

return axios({
    url: apiUrl,
    method: 'GET',
    headers: {
        Accept: "application/json"
    }
})

3. 将两处响应状态判断改为response.status：

if (response.status == 200) {
    // 处理逻辑
}

4. 清理getCoinMarket中API URL的多余空格：

let apiUrl = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=${orderBy}&per_page=${perPage}&page=${page}&sparkline=${sparkline}&price_change_percentage=${priceChangePerc}`

5. 重新运行项目：

npx react-native run-android

修正后的完整marketActions.js #

import axios from "axios";

export const GET_HOLDINGS_BEGIN = "GET_HOLDINGS_BEGIN"
export const GET_HOLDINGS_SUCCESS = "GET_HOLDINGS_SUCCESS"
export const GET_HOLDINGS_FAILURE = "GET_HOLDINGS_FAILURE"
export const GET_COIN_MARKET_BEGIN = "GET_COIN_MARKET_BEGIN"
export const GET_COIN_MARKET_SUCCESS = "GET_COIN_MARKET_SUCCESS"
export const GET_COIN_MARKET_FAILURE = "GET_COIN_MARKET_FAILURE"

//Holding / My Holdings

export const getHoldingsBegin = () => ({
    type: GET_HOLDINGS_BEGIN
})

export const getHoldingsSuccess = (myHoldings) => ({
    type: GET_HOLDINGS_SUCCESS,
    payload: { myHoldings }
});

export const getHoldingsFailure = (error) => ({
    type: GET_HOLDINGS_FAILURE,
    payload: { error }
})

export function getHoldings(holdings = [], currency = "usd", orderBy = "market_cap_desc", sparkline = true, priceChangePerc = "7d", perPage = 10, page = 1) {

    return dispatch => {
        dispatch(getHoldingsBegin())

        let ids = holdings.map((item) => { return item.id }).join(",");
        let apiUrl = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=${orderBy}&per_page=${perPage}&page=${page}&sparkline=${sparkline}&price_change_percentage=${priceChangePerc}&ids=${ids}`

        return axios({
            url: apiUrl,
            method: 'GET',
            headers: {
                Accept: "application/json"
            }
        }).then((response) => {
            console.log("GetHoldings")
            console.log(response)
            if (response.status == 200) {
                //Massage data
                let myHoldings = response.data.map((item) => {
                    //Retrieve our current holdings -> current quantity
                    let coin = holdings.find(a => a.id == item.id)

                    //Price from 7 days ago
                    let price7d = item.current_price / (1 + item.price_change_percentage_7d_in_currency * 0.01)

                    return {
                        id: item.id,
                        symbol: item.symbol,
                        name: item.name,
                        img: item.image,
                        current_price: item.current_price,
                        price_change_percentage_7d_in_currency: item.price_change_percentage_7d_in_currency,
                        holding_value_change_7d: (item.current_price - price7d) * coin.qty,
                        sparkline_in_7d: {
                            value: item.sparkline_in_7d.price.map((price) => {
                                return price * coin.qty
                            })
                        }
                    }
                })

                dispatch(getHoldingsSuccess(myHoldings))
            } else {
                dispatch(getHoldingsFailure(response.data));
            }
        }).catch((error) => { dispatch(getHoldingsFailure(error)); });
    }

}

// Coin Market

export const getCoinMarketBegin = () => ({
    type: GET_COIN_MARKET_BEGIN
})

export const getCoinMarketSuccess = (coins) => ({
    type: GET_COIN_MARKET_SUCCESS,
    payload: { coins }
})

export const getCoinMarketFailure = (error) => ({
    type: GET_COIN_MARKET_FAILURE,
    payload: { error }
})

export function getCoinMarket(currency = "usd", orderBy = "market_cap_desc", sparkline = true, priceChangePerc = "7d", perPage = 10, page = 1) {

    return dispatch => {
        dispatch(getCoinMarketBegin())

        let apiUrl = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=${orderBy}&per_page=${perPage}&page=${page}&sparkline=${sparkline}&price_change_percentage=${priceChangePerc}`

        return axios({
            url: apiUrl,
            method: 'GET',
            headers: {
                Accept: 'application/json'
            }
        }).then((response) => {
            if (response.status == 200) {
                dispatch(getCoinMarketSuccess(response.data))
            }else{
                dispatch(getCoinMarketFailure(response.data))
            }
        }).catch((error) => {
            dispatch(getCoinMarketFailure(error))
        })

    }

}

内容的提问来源于stack exchange，提问作者Osas nathaniel