我的电子商务网站出现错误，“'X' is not defined no-undef”答案

【问题标题】：I have a error in my e-commerce website, "'X' is not defined no-undef"我的电子商务网站出现错误，“'X' is not defined no-undef”
【发布时间】：2020-07-16 18:11:48
【问题描述】：

错误：

./src/reducers/productReducers.js
  Line 3:10:  'PRODUCT_LIST_REQUEST' is not defined  no-undef
  Line 5:10:  'PRODUCT_LIST_SUCCESS' is not defined  no-undef
  Line 7:10:  'PRODUCT_LIST_FAIL' is not defined     no-undef

下面是我的代码

function productListReducer(state = { products: [] }, action) {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true, products: [] };
    case PRODUCT_LIST_SUCCESS:
      return { loading: false, products: action.payload };
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
}
export { productListReducer };

【问题讨论】：

你能在你定义这些动作类型的地方添加代码吗？我认为您忘记从各自的文件中导入这些操作类型。

标签： node.js reactjs redux

【解决方案1】：

您可能不想以字符串形式提供操作类型，或者忘记从其他文件导入它

你可以像这样使用它

function productListReducer(state = { products: [] }, action) {
  switch (action.type) {
    case 'PRODUCT_LIST_REQUEST':
      return { loading: true, products: [] };
    case 'PRODUCT_LIST_SUCCESS':
      return { loading: false, products: action.payload };
    case 'PRODUCT_LIST_FAIL':
      return { loading: false, error: action.payload };
    default:
      return state;
  }
}
export { productListReducer };

或者通过定义和导入类似的actionTypes

actionTypes.js

export const PRODUCT_LIST_REQUEST = 'PRODUCT_LIST_REQUEST';
export const PRODUCT_LIST_SUCCESS = 'PRODUCT_LIST_SUCCESS';
export const PRODUCT_LIST_FAIL = 'PRODUCT_LIST_FAIL';

然后像reducer一样导入

import {PRODUCT_LIST_FAIL, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_REQUEST} from '/path/to/actionTypes.js'

在使用它们之前

function productListReducer(state = { products: [] }, action) {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true, products: [] };
    case PRODUCT_LIST_SUCCESS:
      return { loading: false, products: action.payload };
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
}
export { productListReducer };

【讨论】：

请让我知道上述解决方案是否适合您

【解决方案2】：

你导入你的类型了吗？像这样

types.js

export TYPE_1 = "TYPE_1" export TYPE_2 = "TYPE_2"

Reducers.js：

import {TYPE_1, TYPE_1}

...your codes

【讨论】：

【解决方案3】：

您无法导入 import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL } 在您的 src 文件夹中创建一个常量文件夹，在常量文件夹中创建 productConstants.js

您的 productConstants.js 应该如下所示

export const PRODUCT_LIST_REQUEST = 'PRODUCT_LIST_REQUEST';
export const PRODUCT_LIST_SUCCESS = 'PRODUCT_LIST_SUCCESS';
export const PRODUCT_LIST_FAIL = 'PRODUCT_LIST_FAIL';

现在你应该导入{ PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL } into productReducers.js，它应该是这样的

import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL } from "../constants/productConstants";

function productListReducer(state={products:[]}, action){
    switch(action.type){
        case PRODUCT_LIST_REQUEST:
        return {loading: true};
        case PRODUCT_LIST_SUCCESS:
            return {loading:false, products: action.payload };
            case PRODUCT_LIST_FAIL:
                return { loading:false, error: action.payload}
                default:
                    return state;
    }
}

export {productListReducer};

【讨论】：