React / Redux项目没有评估括号中的ES6

时间:2017-02-21 18:30:23

标签: javascript reactjs ecmascript-6 redux

解决:我已经加入了该文件。我删除了它和模块,然后重新安装NPM并且它工作了......不完全确定那里发生了什么,但这似乎是这样做的。

编辑:这是因为串联插入是不相关的(使用单引号而不是后面的嘀嗒声 - 面掌)但是案例陈述的问题可能无法进行评估仍然是大的。

所以我正在做Wes Bos' Redux Course,这非常酷,我喜欢到目前为止,即使很快就能接受它。

为了让它发挥作用,我需要在这里和那里更新一些非常少的东西。 (例如我的主要组件中的这一行,没有它,Hot Reloading根本不工作:module.hot.accept(),但不在his files中)

我还扩展了React.Component,而不是使用.createClass来尝试更新。否则,我的文件基本上与上面链接的文件完全相同。

关于第13段视频,我遇到了一个完全阻止我的问题,我无法解决这个问题,我只能提出错误的想法,但是我希望有人可以提供帮助。

首先,我认为这个其他更微不足道的问题可能是相关的,我的组件不会像他的意愿那样进行字符串插值:

import React from 'react';
import { Link } from 'react-router';
import CSSTransitionGroup from 'react-addons-css-transition-group';


export default class Photo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { post, index, comments } = this.props

    return (
      <figure className="grid-figure">
        <div className="grid-photo-wrap">

          <Link to={'/view/${post.code}'}> 
            <img className="grid-photo" src={post.display_src} alt={post.caption} />
          </Link> ...

这完全适合他,除非这对我不起作用。链接目标将不会被评估,我将不得不使用:

<Link to={'/view/' + post.code}>

否则href会像这样出现:

http://localhost:7770/view/$%7Bpost.code%7D

无法找到原因不起作用的原因,我使用了丑陋的字符串添加物并继续前进。但后来我在几段视频中遇到了一个停止问题,这让我觉得很相似,可能是相关的,所以我在这里问这个问题。

在他的第12个视频中,他使用以下代码填充了帖子缩减器:

function posts(state=[], action) {
  switch(action.type) {
    case 'INCREMENT_LIKES':
    const index = action.index;
      return [
        ...state.slice(0,index), // before what we are updating
        {...state[index], likes: state[index].likes + 1},
        ...state.slice(index + 1), // after what we are updating
      ]
    default:
      return state;
  }
}

export default posts;

这对他有用。对我来说,根本不是。我明白了:

    5 |       return [
    6 |         ...state.slice(0,index), // before what we are updating
 >  7 |         {...state[index], likes: state[index].likes + 1},
      |          ^
    8 |         ...state.slice(index + 1), // after what we are updating
    9 |       ]
   10 |     default:

我的猜测是,由于某种原因,在两种情况下都没有评估注入的ES6。虽然这两个在其他地方分开工作,因为应用程序中的所有其他内容依赖于注入JS或ES6,直到这一点工作正常。例如,在第一个示例中,post.display_src在括号内被精确计算,使用解构的常量赋值也是如此。因此,我不知道罪魁祸首是否是括号内的ES6。但这是我唯一的想法,据我所知。希望有人可以保释我,这样我就可以继续学习。

PS - 就像我说的那样,除了提到的小改动外,我的文件与他的文件基本相同。我仍然会在这里包含webpack.config.dev.js,因为我预计它可能是很多人的第一个停靠点:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/rootMount'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],
  module: {
    loaders: [
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client'),
    },
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    }
    ]
  }
};

.babelrc文件:

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "plugins": [
        ["transform-object-rest-spread"],
        ["transform-react-display-name"],
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]
      ]
    },
    "production": {
      "plugins": [
        ["transform-object-rest-spread"],
        ["transform-react-display-name"]
      ]
    }
  }
}

2 个答案:

答案 0 :(得分:1)

看起来你的代码没有使用反引号 从这里开始:

'/view/${post.code}'  

到此:

`/view/${post.code}`

答案 1 :(得分:0)

Ignacio的回答可以帮助您解决第一个问题,请记住它是javascript并且您输入了${post.code},就像它是字符串一样,您可以执行Ignacio所做的事情或只做<Link to={'/view/' + post.code }> < / p>

对于使用ES6和开关时的减速器,我发现有必要将表壳的代码包在方括号{}中,因此请将开关更改为

function posts(state=[], action) {
  switch(action.type) {
    case 'INCREMENT_LIKES':{
    const index = action.indes;
      return [
        ...state.slice(0,index), // before what we are updating
        {...state[index], likes: state[index].likes + 1},
        ...state.slice(index + 1), // after what we are updating
      ]}
    default:
      return state;
  }
}

export default posts;

希望有所帮助。