TypeError: Object(...) is not a function [ Redux connect]

编程问答 2022-05-23

问题描述

我遇到了这个错误，我搜索了类似的帖子，但没有一个解决方案对我有用，在我尝试过所有事情之后，错误仍然存​​在（降级和更新包，检查正确导入包......等）

我真的不明白这个错误，我试图使用 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 (将#修改为@）

connectconnectreactjsreactjsreactjsreactjsreduxreduxreduxreduxtypeerrortypeerrortypeerror