Проект React/Redux без оценки в квадратных скобках ES6

Question

РЕШЕННЫЙ: Я ДОБАВЛЕН ЯЗЫК В ФАЙЛ. Я УДАЛИСЬ ЭТО И МОДУЛИ, ЧЕМ УСТАНОВИЛ REDID 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"] 
     ] 
    } 
    } 
} 

Answer 1

Похоже, что ваш код не использует кавычку идут от этого:

'/view/${post.code}' 

к этому:

`/view/${post.code}` 

Answer 2

ответ Игнасио должен помочь вам с первой проблемой, помните, что это javascript, и вы ввели ${post.code}, как если бы это была строка, вы можете сделать то, что Игнасио сделал или просто сделал <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; 

Надежда, что помогает.