Question

我创建了一个使用Redux实现的React简单通量项目。它提供了连续错误，在修复了许多错误之后，它在我的App.jsx文件中发出错误。它实际上在我的App.jsx文件中读取'⇒'字符为'？'。

这是我的webpack.config.js文件

module.exports = {
  entry: './main.js',
  mode: 'production',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}

这是我的package.json

{
  "name": "ReactApp1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "save": "^2.3.2",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  }
}

这是我的App.jsx文件

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'

import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'

class App extends Component {
   render() {
      const { dispatch, visibleTodos } = this.props

      return (
         <div>
            <AddTodo onAddClick = {text⇒dispatch(addTodo(text))} />
            <TodoList todos = {visibleTodos}/>
         </div>
      )
   }
}
function select(state) {
   return {
      visibleTodos: state.todos
   }
}
export default connect(select)(App);

这是我得到的错误

   ERROR in ./App.jsx
Module build failed: SyntaxError: C:/Users/Administrator/Desktop/ReactApp/App.js
x: Unexpected character '?' (15:39)

  13 |       return (
  14 |          <div>
> 15 |             <AddTodo onAddClick = {text?dispatch(addTodo(text))} />
     |                                        ^
  16 |             <TodoList todos = {visibleTodos}/>
  17 |          </div>
  18 |       )

 @ ./main.js 13:11-31
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-serve
r ./main.js
i ?wdm?: Failed to compile.

Answer 1

不要复制粘贴代码。手动输入，以便您可以避免这样的错误：

 <AddTodo onAddClick = {text⇒dispatch(addTodo(text))} />
                         // ^

应该是：

 <AddTodo onAddClick = {text=>dispatch(addTodo(text))} />

使用redux反应js flux实现会产生错误：意外字符'？'

1 个答案: