如何解决TypeError: Object(...) is not a function [ Redux connect]
我遇到了这个错误,我搜索了类似的帖子,但没有一个解决方案对我有用,在我尝试过所有事情之后,错误仍然存在(降级和更新包,检查正确导入包......等)
我真的不明白这个错误,我试图使用 react-redux 的连接,但它只是中断了,我也在学习一个教程,我不止一次确保我的代码 100% 相同,但不知何故我仍然收到这个错误
.index 文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore} from 'redux'
import reducer from './store/reducer'
import { Provider } from 'react-redux'
const store = createStore(reducer);
ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root'));
registerServiceWorker();
减速器文件
const initialState = {
counter: 0
}
const reducer = (state = initialState,action) => {
return state
}
export default reducer;
计数器文件
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": "^17.0.1","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"
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。