React/Redux 项目未评估括号内的 ES6

Question

已解决：我在文件中添加了纱线。我删除了它和模块，然后重新安装了 NPM 并且它工作了......不完全确定那里发生了什么，但似乎做到了。

编辑：所以事实证明字符串插值不相关（使用单引号而不是反引号 - 掌心）但无法评估案例陈述的问题仍然很大。

所以我在做 Wes Bos 的 Redux Course，这很酷，到目前为止我很喜欢它，即使它很快就接受了很多。

为了让它工作，我需要在这里和那里更新一些非常少的东西。 （例如我的主要组件中的这一行，没有它热重载根本不起作用：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"]
      ]
    }
  }
}

Answer 1

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

'/view/${post.code}'  

对此：

`/view/${post.code}`

Answer 2

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

至于使用 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;

希望对您有所帮助。