在React.js中更新状态时出现语法错误

Question

the following code show me an syntax error while updating the state in React.js.

import { FETCH_POSTS } from '../actions/index';
const INITIAL_STATE = { all:[], post: null};

export default (state=INITIAL_STATE,action) => {
  switch(action.type){
    case FETCH_POSTS:
    return { ...state, all: action.payload.data };
    default:
    return state;
  }
}

it show me an error on return { ...state,all:action.payload.data };

Answer 1

According to the ES6 specification, the spread operator can be applied only to iterable objects ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator ). You can use Object.assign or consider something like https://github.com/sebmarkbage/ecmascript-rest-spread with your transpiler.

Answer 2

Make use of Object.assign() to update and return the state

export default (state=INITIAL_STATE,action) => {
  switch(action.type){
    case FETCH_POSTS:
    return Object.assign({}, state, {all: action.payload.data});
    default:
    return state;
  }
}

Answer 3

I had the same issue with the same code as yours when I started my own project after finishing this course https://www.udemy.com/react-redux

I figured out that I forgot to install preset-1 https://www.npmjs.com/package/webpack-preset-babel-stage-1 and include it in webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Answer 4

Well, I came across the same problem. Do remember to install "babel-preset-stage-1" in your npm packages and use it as "stage-1" while setting presets for babel. It will work.