react jsflux implementation using redux 给出错误：意外字符'？

Posted 2023-02-22

【中文标题】react jsflux implementation using redux 给出错误：意外字符\'？

【英文标题】：react js flux implementation using redux gives an error: unexpected character '?'react jsflux implementation using redux 给出错误：意外字符'？

【发布时间】：2018-10-04 12:11:51

【问题描述】：

我创建了一个使用 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.

【参考方案1】：

不要复制粘贴代码。改为手动输入，以避免出现这样的错误：

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

应该是：

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

【讨论】：

非常感谢兄弟。我接受我的错误。感谢您宝贵的时间。