Question

我正在 Udemy 上学习 React 课程，在 Redux 部分我遇到了这个错误 Uncaught TypeError: Object(...) is not a function at connect 。我试图谷歌它，但仍然没有找到解决方案。有人可以帮助我吗？非常感谢。

Counter.js

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

import CounterControl from '../../components/CounterControl/CounterControl';
import CounterOutput from '../../components/CounterOutput/CounterOutput';

class Counter extends Component {
 state = {
     counter: 0
 }

counterChangedHandler = (action, value) => {
    switch (action) {
        case 'inc':
            this.setState((prevState) => { return { counter: prevState.counter + 1 } })
            break;
        case 'dec':
            this.setState((prevState) => { return { counter: prevState.counter - 1 } })
            break;
        case 'add':
            this.setState((prevState) => { return { counter: prevState.counter + value } })
            break;
        case 'sub':
            this.setState((prevState) => { return { counter: prevState.counter - value } })
            break;
    }
}

render() {
    return (
        <div>
            <CounterOutput value={this.props.ctr} />
            <CounterControl label="Increment" clicked={() => this.counterChangedHandler('inc')} />
            <CounterControl label="Decrement" clicked={() => this.counterChangedHandler('dec')} />
            <CounterControl label="Add 5" clicked={() => this.counterChangedHandler('add', 5)} />
            <CounterControl label="Subtract 5" clicked={() => this.counterChangedHandler('sub', 5)} />
        </div>
    );
 }
}

const mapStateToProps = state => {
   return {
       ctr: state.counter
   }
 };

export default connect(mapStateToProps)(Counter);

Package.json

 {
  "name": "react-complete-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.2",
    "react-scripts": "1.0.13",
    "redux": "^4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import reducer from './store/reducer';

const store = createStore(reducer);

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();

reducer.js

const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  return state;
};

export default reducer;

................................

Answer 1

您可能需要在 combineReducers 中导出之前调用 reducer.js

import { combineReducers } from 'redux';
const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  return state;
};

export default combineReducers({counter: reducer});

counter.js 也需要更新：

const mapStateToProps = state => {
   return {
       ctr: state.counter.counter
   }
 };

此外，从设计的角度来看，将计数作为整数而不是对象存储在减速器中更有意义。

Answer 2

我一直在学习相同的课程并面临相同的问题。最后都是关于 React、Redux 和 react-redux 库的版本。因为这门课程似乎不是最新的，并且使用的是 16.0.0 版本的 React。帮助我并使我的项目成功构建的一件事是使用 package.json 项目中的 redux--assignment-2-problem 文件（该项目的源在课程的第 14 节中提供）所以我复制了以下 package.json 并将其粘贴到项目的根文件夹中：

{
  "name": "react-complete-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.13",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

然后我使用该包配置运行 npm install，一切顺利。

未捕获的类型错误：Object(...) 不是连接时的函数

2 个答案: