无法使用一些静态数据在 redux 中加载商店答案

【问题标题】：Unable to load the store in redux with some static data无法使用一些静态数据在 redux 中加载商店
【发布时间】：2018-06-14 08:24:37
【问题描述】：

我正在尝试使用 react、redux 和 webpack 开发一个 web 应用程序。尝试使用一些静态数据在 redux 中加载存储时出现错误。

请看下面的错误

谁能帮我解决这个错误。

我在堆栈溢出方面寻找过类似的问题，但他们提供的解决方案是我在我的应用程序中已有的解决方案。就像人们要求包含依赖项并在预设中进行一些更改

请在下面查看我的代码： app.jsx：

    store.dispatch(actions.changeDirection('Right', true));

    store.dispatch(actions.addTitle());

    var pages1 = [
    {'1',
     'slide1SubHeading1',
     ['point1', 'point2', 'point3']},
     {'2', 'slide1SubHeading2', ['point1', 'point2', 'point3']}
     ];

     var pages2 = [
     {'1', 'slide2SubHeading1', ['point1', 'point2', 'point3']},
     {'2', 'slide2SubHeading2', ['point1', 'point2', 'point3']}
     ];

     var pages3 = [
     {'1', 'slide3SubHeading1', ['point1', 'point2', 'point3']},
     {'2', 'slide3SubHeading2', ['point1', 'point2', 'point3']}
     ];

     store.dispatch(actions.addSlide('ReactSlide 1', false, true, pages1));
     store.dispatch(actions.addSlide('ReactSlide 2', true, true, pages2));
     store.dispatch(actions.addSlide('ReactSlide 3', true, false, pages3));

webpack.config.js 中的模块：

    module: {
        loaders: [
          {
            loader: "babel-loader",
            query: {
              presets: ['react', 'es2015', 'stage-0']
            },
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/
          }
        ]
    }

依赖：

    "dependencies": {
        "axios": "^0.9.1",
        "express": "^4.13.4",
        "firebase": "^3.0.2",
        "react": "^0.14.7",
        "react-dom": "^0.14.7",
        "react-router": "^2.0.0",
        "babel-core": "^6.5.1",
        "babel-loader": "^6.2.2",
        "babel-preset-es2015": "^6.5.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.5.0",
        "css-loader": "^0.23.1",
        "deep-freeze-strict": "^1.1.1",
        "expect": "^1.14.0",
        "foundation-sites": "6.2.0",
        "jquery": "^2.2.1",
        "moment": "^2.12.0",
        "node-sass": "^3.4.2",
        "node-uuid": "^1.4.8",
        "react-addons-test-utils": "^0.14.6",
        "react-redux": "^4.4.1",
        "redux": "^3.3.1",
        "redux-mock-store": "^1.0.3",
        "redux-thunk": "^2.1.0",
        "sass-loader": "^3.1.2",
        "script-loader": "^0.6.1",
        "style-loader": "^0.13.0",
        "webpack": "^1.12.13",
        "node-env-file": "^0.1.8"
      }

【问题讨论】：

标签： reactjs webpack redux react-redux

【解决方案1】：

当你做这样的事情时

var pages1 = [
{'1',
 'slide1SubHeading1',
 ['point1', 'point2', 'point3']}
 //...
 ]

你正在创建一个 js 数组，它的第一个元素是下面的 js 对象

{'1',
 'slide1SubHeading1',
 ['point1', 'point2', 'point3']}

但是这不是有效的 js 对象，因为 js 对象是由键和值组成的，所以这里只有值。

要解决此问题，您必须向对象添加键，例如：

var pages1 = [
   {pageNumber: '1',
    heading: 'slide1SubHeading1',
    points: ['point1', 'point2', 'point3']}
    //...
]

（我只是试图从内容中猜测关键名称，但可能不是您想要的名称）。

【讨论】：