当前位置: 首页 > 面试题库 >

React-Redux @connect语法错误

穆子琪
2023-03-14
问题内容

我是使用React和Redux的新手,正在构建一个简单的todos应用程序。我正在命令行中使用create-react-app工具编写应用程序。

问题

我去了其他博客和帖子,其他人提到我缺少一个npm插件来转换装饰器“ transform-decorators-
legacy”,将其与Babel一起添加到我的依赖项中,但仍然收到相同的错误。

Syntax error: Unexpected token (9:0)

   7 | import './App.css';
   8 |
>  9 | @connect((store) => {
     | ^
  10 |   return {
  11 |     user: store.user.user
  12 |   }

我的密码

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Todos from './components/Todos';
import Todo from './components/Todo';

import './App.css';

@connect((store) => {
  return {
    user: store.user.user
  }
})
class App extends Component {
  constructor(){
    super()
    this.state = {
      name: 'Brad',
      todos: [
        {
          id: '001',
          name: 'Take out trash',
          completed: false
        },
        {
          id: '002',
          name: 'Meeting with boss',
          completed: false
        },
        {
          id: '003',
          name: 'Go out to dinner',
          completed: false
        }
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <h1>Hello</h1>
        <Todos name={this.state.name} todos={this.state.todos}/>
        <Todo/>
      </div>
    );
  }
}

export default App;

我的依赖

package.json

{
  "name": "react-redux-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^4.3.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "react-scripts": "1.0.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

任何帮助/知识将不胜感激,谢谢!


问题答案:

尝试这样:

const stateMap = (state) => {
    console.log('state', state);
    return {
        //something from state
    };
};

export default connect(stateMap)(App);


 类似资料:
  • 本文向大家介绍react-redux中connect()方法详细解析,包括了react-redux中connect()方法详细解析的使用技巧和注意事项,需要的朋友参考一下 组件 React-Redux将所有组件分为两大类:展示组件(UI组件),容器组件 展示组件有以下几个特征: 只负责 UI 的呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.

  • 无法使用语法来代替 它看起来像这样: 但是当我使用@Connect装饰器使事物更干净时,我没有得到任何在我的状态中列出的东西。 突然之间,它不知何故实际上并不连接事物: 我做错了什么,我看到每个人都在使用的神奇的@Connect装饰器的正确使用方法是什么? 其余的代码,以防万一,以@connect的形式;

  • 我有一个组件类,我正在使用react-redux将redux存储连接到该组件类,但是当我尝试将该组件传递到connect函数时,出现了一个错误。 以下是我正在使用的每个接口(redux发出的调度除外): IFileItemProps:组件将使用的所有类型 IFilePassedProps:这些是从父组件传递到组件的道具,所以我没有看到呈现的组件元素的键入问题。 IFileItemReduxStat

  • 我正在使用Redux尝试我的第一个react-native应用程序,并在设备上运行应用程序时得到以下错误消息, “UnableToResolveError:无法从C:\project\testing\index.android.js解析模块react-redux/native:模块映射或以下目录中不存在模块:C:\project\testing\node_modules\react-redux”

  • 问题内容: 我开始使用React JS开发一个Web应用程序。我从主题森林购买了一个主题。在主题中,他们在组件中使用像这样的撰写。 如您所见,导出组件时,他们的代码最后使用了compose。我无法修改其构建结构。我现在想做的是我也喜欢使用react的connect功能。 通常connect用于代替撰写。现在,如果我想使用connect来处理应用程序的状态,如何将其与compose一起使用? 问题答

  • 目录 为何组件没有被重新渲染、或者 mapStateToProps 没有运行? 为何组件频繁的重新渲染? 怎样使 mapStateToProps 执行更快? 为何不在被连接的组件中使用 this.props.dispatch ? 应该只连接到顶层组件吗,或者可以在组件树中连接到不同组件吗? React Redux 为何组件没有被重新渲染、或者 mapStateToProps 没有运行? 目前来看,