Uncaught TypeError: Object(..)在连接时不是函数

Question

我在Udemy上学习React课程，在Redux部分我遇到了这个错误Uncaught TypeError: Object(…)不是一个函数在连接。我试着在谷歌上搜索，但仍然没有找到解决方案。有人能帮我吗?非常感谢。

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

我一直在学习同样的课程，面对同样的问题。最后，一切都是关于React、Redux和React - Redux库的版本。因为这门课程似乎不是最新的，而且使用的是React的16.0.0版本。帮助我并使我的项目成功构建的一件事是使用redux--assignment-2-problem项目中的package.json文件(该项目的源代码在课程的第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，一切正常。

Answer 2

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

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
}
};

此外，从设计的角度来看，将计数存储为整数比将其存储为对象更有意义。