- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 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.
我尝试使用连接的组件是这样的:
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')
);
最佳答案
好的,刚刚在 expo 论坛和 StackOverflow 上找到了解决方案。尝试将 react-redux
降级到 v.6.0.0
。
原因:
connect now uses React.memo() internally, which returns a special object rather than a function.
要做什么:
npm uninstall react-redux -S
npm 我react-redux@6.0.0 -S
关于reactjs - react Redux [v7.0.2] : Getting "TypeError: Object(...) is not a function" when wrapping component export with connect(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55850982/
我有以下代码。我无法理解应如何实现 ProjectCardDescription 组件,以便能够在 ProjectCard 组件中传递其描述 我尝试过这个,但得到一个空组件: import React
我们正试图从 styled-components 项目中找出以下问题的原因:https://github.com/styled-components/styled-components/issues/
将所有文件从 jsx 更改为 tsx 后,出现此错误: ./src/components/index.js Module not found: Can't resolve './Header' in
我正在努力遵循以下 vuejs 应用场景动态组件 + 异步组件模式。一切正常,但仍然只有一个问题:我怎样才能访问通过传入的 Prop 数据 请看现场 fiddle : https://jsfiddl
我已经明白了Difference between React Component and React Element , 使用 JSX 基本上调用 React.createElement它返回一个元素
我最近开始使用 JSX 元素语法而不是调用函数,因为它使代码更漂亮。但看起来又不太一样。令人惊讶的是,因为在 App.js 中,函数调用会导致无限循环(并引发错误),但 JSX 元素可以工作。在 Da
通过少量渲染来构建嵌套组件系统的好方法是什么?请参阅下面带有主要问题(“如何...”)的所需代码: tab.vue(子组件) export default {
我正在编写一个轻量级游戏引擎,并且在为它做一些研究的同时,我遇到了许多令人信服的文章,它们提倡通过“组件集合”模型而不是“从具体类继承”模型来实现游戏对象。有很多优点: 可以使用数据组合对象 驱动设计
类型‘AbstractControl’上不存在属性‘Controls’。
考虑以下示例: function Travel(props) { return ( ) } function Welcom
我刚刚加入了一个 React Native 项目,在那里我经常看到扩展 React.Component 和 Component 本身的类。 示例: 类 SomeView 扩展了 React.Compo
我见过两种访问 Component 的方法: import React from 'react'; class Foo extends React.Component { ... } 和 im
我有一个库 jar,我想将其提供给许多应用程序。我想要的行为是在库中创建一个通用的 spring 组件类。如果在应用程序中,没有扩展相同的组件,则使用公共(public)组件;如果它在应用程序中扩展,
所以我正在制作一个游戏,我有 EnemyAI 以及 player,它们都扩展了 JPanel。世界有一个 null 布局,所以我正在使用 setBounds(); 来“移动”(我实际上只是移动世界图像
在 styled-component 中,您如何决定是应该使用插值函数来修改组件(通过传递 props )还是扩展现有组件。例如: const Button = styled.button`
我搜索并获取了以下信息。 请添加您的信息 h:commandbutton 与 a4j:commandButton 相同,唯一的区别是 a4j:commandButton 有额外的 ajax 请求。 a
我目前在一个项目中,我们有一个动态“表单”/内容模型,其中我们有一个包含字段和占位符的模块,占位符可以包含更多模块,为我们提供递归/灵活的数据模型. 现在为了渲染这个,我们创建了一个组件来渲染模块,动
我是 React 的新手,正在尝试设置一个 Bootstrap 模式来显示警报消息。 在我的父 App.js 文件中,我有一个错误处理程序,它向 Modal.js 组件发送一个触发模态显示的 Prop
通过 background-color:red 获得主页组件写入其 scss,然后使用 background-color:green 获取用户组件写入它的 scss。我启动我的应用程序,我在家,背景是
我有这个基本的应用程序,其中一些组件具有公共(public) load 方法。对于某些操作,我想在当前 svelte:component 上调用该方法,但我不知道如何获取对组件实例的引用。如何做到这一
我是一名优秀的程序员,十分优秀!