React js给出错误传播运算符答案

【问题标题】：React js giving error spread operatorReact js给出错误传播运算符
【发布时间】：2018-02-07 13:39:41
【问题描述】：

我是 React 新手，在使用 ...（扩展运算符）时遇到问题。

尝试添加和删除其他模块，但没有帮助

import { createStore } from 'redux';

const initialState = {
    result : 1,
    lastValues: []
};

const reducer = (state = initialState,action) =>{
    switch(action.type){
    case "ADD":
        state : {
            ...state,
            result : state.result + action.payload
        };
    break;
    case "MULTIPLY":
        state.result *= action.payload;

    break;
    }
    return state;
};

const store = createStore(reducer);

store.subscribe( () => {
    console.log("store updated",store.getState());
});

store.dispatch({
    type : "ADD",
    payload: 10 
});

store.dispatch({
    type : "MULTIPLY",
    payload: 111
});

webpack.config.js

var path = require('path');
var config = {
    entry: './main.js',
    output: {
        path:'/public/',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 9999
    },
    module: {
        loaders: [
            {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015','react','stage-0']
            }
            },
            {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
            }, 
            {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!resolve-url-loader!sass-loader'
            }
        ]
    }
}
module.exports = config;

package.json

{
    "name": "react_project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "start": "webpack-dev-server --hot"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
    "@progress/kendo-react-layout": "^0.3.0",
    "babel": "^6.5.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap": "^4.0.0",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-bootstrap-tabs": "^1.0.2",
    "react-checkbox-group": "^3.3.4",
    "react-dom": "^16.2.0",
    "react-modal": "^3.1.11",
    "react-native-camera": "^0.13.0",
    "react-redux": "^5.0.6",
    "react-responsive-modal": "^2.0.0",
    "react-router": "^4.2.0",
    "react-tab-panel": "^2.2.7",
    "reactstrap": "^5.0.0-alpha.4",
    "redux": "^3.7.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
    },
    "devDependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap-loader": "^2.0.0-beta.16",
    "css-loader": "^0.28.9",
    "style-loader": "^0.20.1"
    }
}

我尝试使用 "babel-plugin-transform-object-rest-spread" 并将 ""plugins": ["transform-decorators-legacy"]" 添加到 webpack.config.js，但出现错误。

请指教

【问题讨论】：

您是否尝试过设置："plugins": ["transform-object-rest-spread"]" 而不是transform-decorators-legacy？
Thnx 很多沙阿兄弟，它工作了

标签： reactjs react-native react-redux

【解决方案1】：

你需要 babel 插件transform-object-rest-spread

"plugins": ["transform-object-rest-spread"]

【讨论】：

非常感谢 Sagiv

【解决方案2】：

这样试试

npm install --save babel-plugin-transform-object-rest-spread

然后

"plugins": ["transform-object-rest-spread"]

【讨论】：

【解决方案3】：

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

为你的减速器使用这个类似的例子

【讨论】：