Question

我正在尝试将redux添加到我的项目中，但是我陷入了无法调试的愚蠢错误。当我尝试使用'connect（）'导出组件以访问Redux存储时，总是会出现此错误。它仅在使用connect（）函数时发生。如果我将其从代码中删除，则可以正常编译：

connectAdvanced.js:116 Uncaught TypeError: Object(...) is not a function
    at ConnectFunction (connectAdvanced.js:116)
    at updateFunctionComponent (react-dom.development.js:15034)
    at updateSimpleMemoComponent (react-dom.development.js:14978)
    at updateMemoComponent (react-dom.development.js:14891)
    at beginWork (react-dom.development.js:16041)
    at performUnitOfWork (react-dom.development.js:19102)
    at workLoop (react-dom.development.js:19143)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:18350)
    at renderRoot (react-dom.development.js:19261)
    at performWorkOnRoot (react-dom.development.js:20165)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at requestWork (react-dom.development.js:19904)
    at scheduleWork (react-dom.development.js:19711)
    at scheduleRootUpdate (react-dom.development.js:20415)
    at updateContainerAtExpirationTime (react-dom.development.js:20441)
    at updateContainer (react-dom.development.js:20509)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20820)
    at react-dom.development.js:20974
    at unbatchedUpdates (react-dom.development.js:20292)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:20970)
    at Object.render (react-dom.development.js:21037)
    at Module../src/index.js (index.js:9)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object.0 (store.js:26)
    at __webpack_require__ (bootstrap:781)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
ConnectFunction @ connectAdvanced.js:116
updateFunctionComponent @ react-dom.development.js:15034
updateSimpleMemoComponent @ react-dom.development.js:14978
updateMemoComponent @ react-dom.development.js:14891
beginWork @ react-dom.development.js:16041
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:18350
renderRoot @ react-dom.development.js:19261
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:9
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ store.js:26
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 3 more frames

The above error occurred in the <ConnectFunction> component:
    in ConnectFunction (at src/index.js:11)
    in Provider (at src/index.js:10)

Consider adding an error boundary to your tree to customize error handling behavior.

我要使用connect的组件是这样的：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LiveList from './components/LiveList';
import Topology from './components/Topology';
import EventLog from './components/EventLog';
import NetworkTraffic from './components/NetworkTraffic';
import Maintenance from './components/Maintenance';
import BootstrapMenuBar from './components/menu/BootstrapMenuBar';
import Homepage from './components/home/Homepage';
import Configuration from './components/login-config/Configuration';
import Login from './components/login-config/Login';
import LoginHandler from './components/login-config/LoginHandler';
import { connect } from 'react-redux';

require('es6-promise').polyfill();
require('isomorphic-fetch');

class App extends Component {

  render() {
    return (
        <Router>
          <div className="App">
            <BootstrapMenuBar />
            <div style={appStyle}>
              <Route exact path="/" component={Homepage} />
              <Route path="/livelist" component={LiveList} />
              <Route path="/topology" component={Topology} />
              <Route path="/traffic" component={NetworkTraffic} />
              <Route path="/maintenance" component={Maintenance} />
              <Route path="/log" component={EventLog} />
              <Route path="/config" component={Configuration} />
              <Route path="/login" component={Login} />
              <Route path="/login-handler" component={LoginHandler} />
            </div>
          </div>
        </Router>
    );
  }
}

// CSS Custom App Margins
const appStyle = {
  marginLeft: '24px',
  marginRight: '24px',
  marginBottom: '24px',
  marginTop: '8px'
}


export default connect()(App);

我在index.js中提供商店：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'react-bootstrap';
import 'semantic-ui-css-offline';
import { Provider } from 'react-redux';
import store from './store';

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

Answer 1

OK刚刚在expo论坛上和StackOverflow上找到了解决方案。尝试将react-redux降级为v.6.0.0。

原因：

connect现在在内部使用React.memo（），它返回一个特殊的对象而不是函数。

做什么：

npm uninstall react-redux -S

npm i react-redux@6.0.0 -S

Answer 2

问题应该出在connect()(App)上。 connect函数需要至少一个参数，该参数是一个函数，通常称为mapStateToProps。

connect(state => state)(App) 
//state => state will giving you all state from store to your component

除非您的App.js要求redux商店提供状态，否则不一定connect您的所有组件

Answer 3

react-redux需要release notes中指定的最低版本react。特别是，7.0.3对响应^16.8.3具有同级依赖。

（如果可以的话）应该升级react-redux，而不是降级react：

npm upgrade react react-dom

Answer 4

需要同时升级react和react-dom：

npm install --save react@latest

npm install --save react-dom@latest

react-redux [v7.0.2]：使用connect（）包装组件导出时，获取“ TypeError：Object（...）不是函数”

4 个答案: