简单的react-redux连接函数中出现错误
在React-Redux中，连接函数是用于将React组件与Redux store进行连接的函数。它允许组件访问store中的状态和调度action。
当在简单的React-Redux连接函数中出现错误时，可能是由于以下几个原因：
- 引入错误：请确保正确引入了所需的React和Redux库以及相关的React-Redux库。可以使用npm或yarn等包管理工具进行安装。
- 组件错误：检查连接函数是否正确应用在组件上。连接函数通常使用
connect()方法进行调用，并将组件作为参数传递给它。确保组件的导出语句正确，并且连接函数被正确应用。 - mapStateToProps错误：连接函数的第一个参数是
mapStateToProps函数，它用于将store中的状态映射到组件的props上。确保mapStateToProps函数正确定义，并且返回一个对象，该对象包含组件所需的状态属性。 - mapDispatchToProps错误：连接函数的第二个参数是
mapDispatchToProps函数，它用于将action创建函数映射到组件的props上。确保mapDispatchToProps函数正确定义，并且返回一个对象，该对象包含组件所需的action创建函数。 - 错误的组件嵌套：如果在连接函数中使用了嵌套组件，确保正确传递了props，并且嵌套组件也正确地连接到了Redux store。
- 异步操作错误：如果在连接函数中进行了异步操作，例如使用了Redux Thunk或Redux Saga等中间件，确保中间件正确配置，并且异步操作的代码逻辑正确。
总之，当在简单的React-Redux连接函数中出现错误时，需要仔细检查代码，确保正确引入库、正确应用连接函数、正确定义mapStateToProps和mapDispatchToProps函数，并排除其他可能导致错误的因素。如果问题仍然存在，可以参考React-Redux官方文档或在相关的开发社区中寻求帮助。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBCS）：https://cloud.tencent.com/product/tbcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我正要用React-Redux开始一个项目。对于API引用，有Hooks和connect()。因此，Hooks是连接API的替代。使用钩子或连接到我的React-Redux项目有什么不同？
浏览 0提问于2019-09-20得票数 16
如果我像这样连接我的组件：
connect(({ users }) => ({ users }))(MyComponent)
类型记录将给我一个错误，说type {} does not contain a property users，但我可以想象它可以推断类型的mapStateToProps是ReturnType<typeof reducer>，其中还原器是我给我的商店的功能。
有没有任何方法可以更改redux，这样我上面的代码就不会出现类型记录错误了吗？还是我对Typescript或react-redux有误解？
浏览 3提问于2019-10-21得票数 0
回答已采纳
我正在写一个库，为我们公司的React应用程序提供一些基本的高阶组件。要点是HOC将从我们的redux状态中拉出一些切换，并有条件地渲染组件或注入道具(取决于所使用的HOC)。 只有在HOC中使用connect函数时，才会出现Error: Invalid hook call.错误。它们可以无错误地返回/呈现作为参数提供的React组件。我最初认为这可能是因为React的版本不匹配或重复的React版本，但由于它可以很好地呈现/返回React组件，我认为这与尝试连接到redux有关。 我已经确认在redux状态obj中有一个切换键，库正在拉入react-redux ( connect函数不是未
浏览 60提问于2021-07-02得票数 0
1回答
我在React-Redux连接组件测试中遇到了麻烦。我想用异步操作来测试这个组件，但在控制台中我总是得到一个错误...我使用带有jest的React- testing -library进行测试(而不是酶)。 存在控制台错误 expect(jest.fn()).toHaveBeenCalledWith(...expected)
Expected: [Function anonymous]
Received: [Function anonymous]
Number of calls: 1
45 | it('should dispatch an action on page
浏览 21提问于2020-12-25得票数 2
回答已采纳
类扩展值#不是构造函数或空
当尝试继承与react redux“连接”->绑定的父类时，会出现错误。
Redux
const mapStateToProps=(state)=>({
.....
});
const mapDispatchToProps=(dispatch)=>{
return {
paymentOver:()=>dispatch(paymentClose()),
}
}
export {
mapStateToProps,mapDispatchToProps
}
父类
import { co
浏览 1提问于2021-02-12得票数 0
回答已采纳
2回答
我正在尝试使用简单的对象简化器来显示组件中的数据。但是，该对象的状态并没有上升到组件。代码结构如下所示。
labels.js：
export default function () {
return [
{ id: 1, name: "Labels1"},
{ id: 2, name: "Labels2"}
]
}
allReducer(索引)
import { combineReducers } from 'redux';
import labelsReducer from './labels'
浏览 5提问于2020-03-06得票数 0
回答已采纳
3回答
我正在尝试将我的Redux存储与我的React项目连接起来，但我一直收到以下错误：
找不到../node_modules/react-redux/es/components/Provider.js模块:无法解决'C:\Users.\Documents..\node_modules\react-redux\es\components‘中的“反应”
我已经安装了react-redux和redux (我相信redux对redux有一些依赖)
import { Provider} from 'react-redux';
这就是造成错误的原因。
对我能做什么有什么建议吗？
浏览 0提问于2019-08-31得票数 9
回答已采纳
3回答
根据redux的文档，reducer总是给出一个新的状态副本。在一个连接的组件中，react-redux对mapStateToProps中提到的属性进行了简单的比较(旧的和新的属性)。
我的困惑是，因为redux总是提供状态的新副本，所以react-redux所做的浅层比较应该总是给出false，并且组件应该总是重新呈现。但这并没有发生。
有人能解释一下我错过了什么吗？
我认为在mapStateToProp中读取的所有属性都是对象。
浏览 0提问于2019-05-19得票数 4
所以我试着用redux和类型记录。这就是我的package.json的样子
"dependencies": {
"@types/react-dom": "15.5.0",
"@types/react": "15.0.4",
"@types/react-redux": "4.4.39",
"axios": "0.16.2",
"react": "15.
浏览 3提问于2017-09-16得票数 1
回答已采纳
我有子组件：
import * as React from "react";
import {Component} from "react";
import {connect} from "react-redux";
class Child extends Component<any, any> {
childFunction = () => {
console.log('childFunction');
};
render() {
return &l
浏览 16提问于2019-07-13得票数 0
我在ASP.NET核心应用程序中使用react/redux，如果不包括redux，一切都会顺利进行，但是在添加redux和更改当前组件以连接到存储区之后，在浏览器中(在发布网站t wwwroot文件夹之后)会出现以下错误：
ReferenceError:未定义提供程序
或
ReferenceError:未定义连接
..。
请注意，在我的wwwwroot文件夹中，我添加了redux redux.js文件，该文件存在于节点-模块中的redux模块的dist文件夹中。
---node_modules\react-redux\dist\react-redux.js
在下面，我将我的一个
浏览 0提问于2018-10-25得票数 3
回答已采纳
我想使用ref从连接的组件调用一个函数，所以我之前在连接的组件中使用了withRef: true：
export default connect(
mapStateToProps, mapDispatchToProps, null, {withRef: true}
)(InviteReceiverForm)
在表现性组件中：
<ExampleComponent
ref={ cmp => { if(cmp) { this.individualSenderFormRef = cmp.getWrappedInstance() }} />
但是在我更新到react-redu
浏览 2提问于2018-12-18得票数 36
回答已采纳
1回答
下面是我正在尝试使用的代码，但是在组件LogIn中，我得到了一个没有共享存储的错误。我尝试将存储共享给tabNavigation，以便将所有子组件都与商店共享。
import React from 'react';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import TabNavigator from './TabNavigator';
import { Store } from './Store/Store'
浏览 1提问于2019-02-13得票数 2
回答已采纳
我尝试渲染两个不同的按钮，如果用户登录或未登录，但我得到这个错误几个小时，是什么导致它？我从一个不同的文件中获得了道具，所有的东西都是用react-redux连接起来的。
import React, { Component } from "react";
import { connect } from "react-redux";
import {MenuItem,NavDropdown,NavItem,Navbar,Nav,Button} from "react-bootstrap";
import PropTypes from "pr
浏览 0提问于2018-12-14得票数 0
在尝试在我的jest测试中设置组件时，我得到了以下错误：
不变冲突:无法在“连接(TestComponent)”的上下文或道具中找到“存储”。或者将根组件包装在一个，或者显式地将“存储”作为“连接(TestComponent)”的支柱。
我的测试看起来如下：
import React from 'react';
import { shallow } from 'enzyme';
import { Map } from 'immutable';
import { createStore } from 'redux';
im
浏览 1提问于2019-07-31得票数 0
当使用connect()( component )包装组件时，我的React Native应用程序出现错误。"_react.default.memo不是一个函数(在_react.default.memo(ConnectFunction)中，_react.default.memo是未定义的。我该如何解决这个问题？
我相信这个问题是基于我使用React和Redux的版本号。但我无法找到罪魁祸首。这个应用程序还处于非常早期的开发阶段，但也许我只是忘记了将某些东西与我的商店连接起来。
目前，我从package.json获得的版本如下
"dependencies": {
浏览 1提问于2019-04-13得票数 3
我在redux项目上遇到了一个令人困惑的行为，它使用流类型的repo中的react-redux类型来测试flowtype(0.43.0)。
// @flow
import React from 'react'
import {connect} from 'react-redux'
class ChildComponent extends React.Component {
props: {
value: string,
otherValue: string
}
render() {
return <span>{
浏览 0提问于2017-04-05得票数 3
我正在尝试将表单填写的数据提交给道具。我知道REACT-REDUX，但不知道如何连接基于函数的组件
这是我的代码片段：
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
// import { connect } from "react-redux";
export default function TextFields(pr
浏览 8提问于2019-10-21得票数 0
回答已采纳
我有这个错误，不能处理这件事。
错误出现在这里。但我不知道为什么。
import React, { Component } from 'react';
import { connect } from 'react-redux';
class LibraryList extends Component {
render() {
return null;
}
}
const mapStateToProps = state => ({
});
export default connect(mapS
浏览 1提问于2019-04-26得票数 4
“元素类型无效:期望字符串(用于内置组件)或类/函数(用于组合组件，但用于got: object )。请检查AppContainer的呈现方法。
我得到了最初在教程视频中显示的错误：
该文件已被正确命名为"/app/containers/ApplicationTabs/index.ios.js“，文件内容与本教程所示完全相同。
然而，当应用程序在视频中运行时，一旦ApplicationTabs被“连接”，我在做完之后仍然会收到上面的错误。
不过，我使用的是许多react/react模块的更新版本--本机/redux模块。我不确定使用带有OS特定命名的文件的约定是否会影响导入它
浏览 2提问于2017-01-25得票数 0
我们在连接的组件中获得调度函数ref，但是当我们在连接函数中使用动作创建者参数时，它将不会像以前那样返回调度函数。
案例1.只有连接函数的第一个参数的。
import React, { Component } from 'react';
import { connect } from 'react-redux';
class App extends Component {
render() {
console.log('this.props',this.props)
return (
<div classN
浏览 0提问于2019-04-19得票数 1
回答已采纳
我认为Redux对调试非常有用，因为它可以跟踪应用程序在其开发工具中调度的操作。在不打算使用reducer处理的情况下调度操作是不是一种糟糕的做法？
例如，我希望进行一次AJAX调用并根据响应更新本地react组件状态，但仍希望在开发工具中记录此调用以便进行调试。我想创建一个动作创建器，使用react-redux的连接包装器中的react-redux mapDispatchToProps属性将它连接到我的组件，但在我的reducer函数中永远不会有处理这个动作的case。
浏览 2提问于2020-02-25得票数 0
1回答
我正在尝试为griddle v1.6.0创建一个增强器。
我得到了这个错误：
隐藏错误:无法在“连接(行)”的上下文或道具中找到“存储”。或者将根组件包装在一个，或者显式地传递"store“作为"Connect(Row)”的支柱。
这是我的增强器
import { connect } from 'react-redux';
import { selectors } from 'griddle-react';
const { rowDataSelector } = selectors;
export default connect((s
浏览 1提问于2017-06-08得票数 0
9回答
我正试图在我的reactjs应用程序中应用redux。我不能继续下去，因为这些错误：
我确信我已经安装了所需的所有依赖项。以下是我的package.json的相关部分
"dependencies": {
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"
浏览 11提问于2017-10-22得票数 39
回答已采纳
我用的是幼虫的混合物，react。
正在尝试实现redux-thunk中间件。我遇到了异步呼叫的问题。我想使用jquery for ajax (它成功地检索了API数据，但我得到了一个错误，
"Error: dispatch is not a function"，意思是我不能对存储进行任何更改。据我所知，dispatch和GetState是通过thunk中间件传递的。对吗?为什么我不能使用这个函数呢？
它还给出了一个错误：“错误:操作可能没有未定义的"type”属性。您是否拼错了常量？“
在尝试处理上述问题之后，出现的另一个问题是：“错误:操作必须是纯对象。使用自定义中
浏览 0提问于2018-04-29得票数 0
我正在开发第一个React-Redux应用程序。我有以下容器：
import { connect } from 'react-redux'
import Visualization from '../components/visualization'
// http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components
const mapStateToProps = (state) => state; // identity transform,
浏览 0提问于2017-04-24得票数 1
在运行我的代码时，我会收到以下错误，并且不知道从哪里开始调试它。
连接中的mapStateToProps() (EquipmentMetadata)必须返回一个普通对象。取而代之的是未定义的接收。警告:错误的道具类型:道具名称在EquipmentMetadata中被标记为必需的，但是它的值没有定义。
这是索引文件：
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
// import Root from './c
浏览 1提问于2018-08-27得票数 5
在使用插入符号：：train()运行逻辑回归模型时出现问题。LR = caret::train(Satisfaction ~., data= log_train, method = "glm", preProcess = c("scale"), family="binomial")
继续获取以下错误行：
summary.connection中的错误(连接)：无效连接
这个错误对我来说是新的，因为当我以前运行这段代码时，我没有看到任何问题。请帮帮我！
浏览 7提问于2020-10-25得票数 8
我在使用connect()时遇到了一点小问题。我原以为在Provider中包装所有组件会起作用，但事实证明并非如此……所以我发现我需要使用react-redux中的connect()。问题是我不知道该如何使用它。正在展示一些例子，但是，我没有任何动作创建器放在连接中，因为我不使用它们......有人能给我一些建议吗？我只想访问我的存储中的组件...
浏览 2提问于2016-12-07得票数 5
我想从react.Js中的另一个类调用函数，我成功地做到了这一点。我的问题是我得到了错误:您必须将一个组件传递给connect返回的函数。相反，收到{“ref”：{}，“updater”：{}，如果我使用react-redux。下面是一个基本的算法示例
import { Component } from "react";
import { GetCityListFromActiveAddressSource } from '../Services/AddressService'
import { connect } from 'react-redux&#
浏览 2提问于2021-10-13得票数 1
3回答
我正在使用Enzyme对我的反应组件进行单元测试。我理解，为了测试未连接的原始组件，我只需导出并测试它(我已经这样做了)。我已经成功地为连接的组件编写了一个测试，但是我真的不确定这是否是正确的方法，也不确定我到底想为连接的组件测试什么。
Container.jsx
import {connect} from 'react-redux';
import Login from './Login.jsx';
import * as loginActions from './login.actions';
const mapStateToProps =
浏览 0提问于2016-08-17得票数 24
回答已采纳
我正在为一个freeCodeCamp.org项目构建一个投票应用程序。
每一项投票都有一份投票选项清单。
在一次投票中，我试图提供所有可供选择的投票方式。
直接在投票组件中标记投票选项是有效的，但当我将标记分解为“选项”子组件时，则不起作用。
在react工具中，出现了一个连接标记，但没有DIV，这使我认为我处理的呈现完全错误。
图像
a_poll.js (父组件)
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PollOption
浏览 4提问于2017-09-19得票数 1
使用redux连接的组件，在导出之前位于jsx文件底部的组件已连接到存储。看起来是这样的..。
const Button = connect(mapStateToProps)(UnconnectedButton);
export default Button;
第二个参数是要连接的组件。
对我来说这看起来很奇怪。connect函数是如何调用组件的？我本以为最里面的括号只是一个逗号，用来分隔参数。这里到底发生了什么?即使没有react-redux库，这种合法的javaScript语法也可以使用吗？
浏览 14提问于2020-02-12得票数 0
回答已采纳
? 当我尝试导入'useSelector‘时，控制台中出现错误"useSelector is not exported from react-redux“
浏览 37提问于2020-04-04得票数 0
2回答
我试图将存储作为属性传递给AddTodo，但我得到了错误:无法读取未定义的属性“todo”
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { connect } from 'react-redux'
import { createStore } from 'redux'
const todo = (state, action) => {
浏览 3提问于2017-06-25得票数 0
回答已采纳
2回答
//action code
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'
export const clearCompleted = () => {
return{
type: CLEAR_COMPLETED
}
}
//reducer code
case CLEAR_COMPLETED:
return state.map(todo => {if (todo.completed)
{return {...todo, show:false}}
浏览 0提问于2017-12-11得票数 2
我想将react-i18next与我的react-redux连接组件一起使用，但不确定如何进行。
我简化了代码，显示了一个连接组件的示例：
import React from 'react';
import {connect} from 'react-redux';
import {userSelectors} from "./userSelectors";
interface IConnectedProps {
activeUserName: string | undefined;
}
export class LandingPage
浏览 0提问于2019-04-10得票数 21
我习惯于将React组件连接到Redux，如下所示： 在index.js中： import { connect } from "react-redux";
import { doThing } from "store/actions";
import Component from "./component";
const mapState = (state) => {
const { foo } = state;
return {
foo
};
};
const mapDispatch = {
doThing,
浏览 24提问于2020-04-24得票数 1
回答已采纳
我正在尝试通过react-redux来使用暗模式和光模式的主题切换。
Color.js
import { useSelector } from 'react-redux';
const darkMode = {
primary: 'black',
secondary: 'white',
}
const lightMode = {
primary: 'white',
secondary: 'black',
}
function ColorMode(
浏览 1提问于2021-07-23得票数 1
1回答
正在编写Dan关于Redux的优秀教程，以及第27章--使用connect()生成容器--出现了一个奇怪的错误：
首先，我定义了这两个函数：
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
};
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
disp
浏览 2提问于2016-11-16得票数 0
回答已采纳
我正在尝试通过容器将Redux mapStateToProps()和mapActionCreators()连接到登录屏幕，并且我使用的是React导航。
生成我的应用程序后，会出现以下错误消息：
_react“默认”.memo不是一个函数。(在“_react”默认值“.memo(ConnectFunction)”中，“_react”默认值“.memo”未定义。
我搜索了一段时间，但我得到的是React.memo()帮助我们控制组件重发时的情况，但我不使用任何与React.memo()相关的代码。
登录屏幕：(屏幕/LoginScreen/index.js)
import React f
浏览 0提问于2019-04-15得票数 14
我正在使用angular和redux (ngRedux)构建一个应用程序。现在我想使用react而不是angular来提高性能。它是一个巨大的应用程序，所以不可能从头开始构建它。因此，我想使用angularJS (angular-ui-router)的路由，当任何"abc“状态变为活动状态时，react组件变为load，该react组件应针对每个单独的事件使用纯redux。
我如何维护我的应用程序，因为单个模块是在react-redux中构建的，并且只能通过路由状态连接到angular。请记住，应用程序的其他模块也不应受到干扰。
浏览 0提问于2017-03-31得票数 2
有人知道在使用react-redux中的connect函数时，如何用React.memo包装React组件吗？
例如，您将如何修改以下内容？
let Button = (props: Props) => (
<button onClick={props.click}>{props.value}</button>
);
Button = connect(
mapStateToProps,
mapDispatchToProps
)(Button);
我试过了：
let Button = React.memo((props: Props) => (
浏览 295提问于2018-10-26得票数 32
回答已采纳
我有redux连接组件与onClick动作绑定到它。每次我点击它的重选器，尽管我使用useCallback钩子。以下是我的简化组件：
const Map = props => {
const dispatch = useDispatch(); // from react-redux
const coordinates = useSelector(state => state.track.coordinates); // from react-redux
const onClick = useCallback( // from react
data => {
浏览 3提问于2019-12-23得票数 0
回答已采纳
当我想在子组件中使用动作时，我发现子组件Element没有连接。
如何连接？
代码：
import { connect } from 'react-redux';
import * as actions from '../actions';
class Element extends React.Component {
constructor(props) {
super(props);
}
render() {
let { children } = props.el.children;
浏览 1提问于2017-04-27得票数 1
我有一个React容器，它连接到Redux Store。我的Redux有一个数据数组，我在mapStateToProps中使用这些数据。但我无法在JSX内部使用它。没有错误。但是，浏览器中没有显示任何内容。控制台记录对象会给出属性。
import React from 'react';
import {connect} from 'react-redux';
class CurrentStore extends React.Component {
render () {
console.log(this.props.current);
re
浏览 3提问于2017-07-01得票数 0
回答已采纳
2回答
我试图创建临时和使用自定义反应钩子在里面。另外，为了使用钩子，我需要将段落传递给HOC，但是只在函数体中使用钩子时会出现错误。我的特写是：
export const withUseAxisTranslate = (props) => {
const [t] = useAxisTranslate(props.namespace);
return (WrappedComponent) => (moreProps) => <WrappedComponent {...moreProps} t={t} />;
};
我的useAxisTranslate看起来像：
i
浏览 3提问于2020-04-30得票数 0
回答已采纳
我在redux中是新手，我尝试在设置all时将redux与redux连接起来，在App.js中我添加了<provider store={store}>，它显示了错误：TypeError：(0，_$$_REQUIRE(_dependencyMap，"redux").createStore)不是一个函数。
App.js
import { Counter } from './assets/counter';
import { Provider } from 'react-redux';
import {store} from './
浏览 3提问于2021-08-17得票数 2
回答已采纳
1回答
我有一个函数组件，我想用jest编写测试。但我无法评估结果。我应该如何为这样的组件编写测试？下面是我要测试的组件：
import React from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import ExpenseForm from "./ExpenseForm";
import { addExpense } from "../store/expenses/a
浏览 7提问于2021-12-29得票数 0
回答已采纳
1回答
连接到MySQL数据库时出现以下错误：
Connection using old (pre-4.1.1) authentication protocol refused (client option 'secure_auth' enabled)
使用不同版本的libmysql.dll时可能会出现此问题。
我可以使用从安装MySQL社区服务器(5.6.0)获得的以前版本进行连接。但是，当我自己使用MySQL C/connector源代码构建libmysql.lib和.dll时，连接失败并出现上述错误。因此，这使我认为，在构建DLL文件时，源代码中可能有一个设置，我必须遵守该设置才
浏览 3提问于2013-05-16得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
