具有react高阶组件和react-redux的库抛出错误:仅当使用redux connect函数时，钩子调用无效
问题描述： 具有react高阶组件和react-redux的库抛出错误: 仅当使用redux connect函数时，钩子调用无效。
回答： 这个错误通常发生在使用react高阶组件（Higher-Order Component，HOC）和react-redux库时。它表明在使用redux的connect函数时，钩子函数调用无效。
首先，让我们了解一下这些概念和技术。
React高阶组件（Higher-Order Component，HOC）是一种用于重用组件逻辑的高级技术。它是一个函数，接受一个组件作为参数，并返回一个新的组件。HOC可以用于在组件之间共享状态、逻辑和行为。
React-Redux是一个用于在React应用中管理状态的库。它结合了React和Redux，提供了一种将Redux状态管理与React组件结合使用的方式。通过使用React-Redux的connect函数，我们可以将Redux的状态和操作注入到React组件中。
现在回到错误的原因。当使用redux的connect函数时，它会将Redux的状态和操作作为props传递给包装的组件。然而，如果在使用HOC时，没有正确处理这些props，就会导致钩子函数调用无效的错误。
为了解决这个问题，我们可以采取以下步骤：
- 确保在使用HOC时，正确处理传递给包装组件的props。这意味着在组件内部使用这些props，并确保它们被正确地传递给子组件或其他需要使用它们的地方。
- 确保在使用HOC时，正确地将Redux的状态和操作传递给包装组件。这可以通过在connect函数中指定mapStateToProps和mapDispatchToProps参数来实现。mapStateToProps用于将Redux的状态映射到组件的props，而mapDispatchToProps用于将Redux的操作映射到组件的props。
- 确保在使用HOC时，正确地将包装组件的props传递给connect函数。这可以通过使用spread操作符（...）将props传递给connect函数来实现。例如：connect(mapStateToProps, mapDispatchToProps)(...props)。
综上所述，当遇到具有react高阶组件和react-redux的库抛出"仅当使用redux connect函数时，钩子调用无效"的错误时，我们应该检查是否正确处理了传递给包装组件的props，并确保正确地将Redux的状态和操作传递给包装组件。
相关·内容
4回答
如何通过react-redux连接使用React.memo？
javascript、reactjs、redux、connect
有人知道在使用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
回答已采纳
1回答
Redux类扩展值#<Object>不是构造函数或null
reactjs、redux、react-redux
类扩展值#不是构造函数或空
当尝试继承与react redux“连接”->绑定的父类时，会出现错误。
Redux
const mapStateToProps=(state)=>({
.....
});
const mapDispatchToProps=(dispatch)=>{
return {
paymentOver:()=>dispatch(paymentClose()),
}
}
export {
mapStateToProps,mapDispatchToProps
}
父类
import { co
浏览 1提问于2021-02-12得票数 0
回答已采纳
3回答
需要代码解释Javascript将函数分配给常量
javascript、react-redux
嗨，我有以下反应-基于Redux的代码片段，不理解以下一行：
const List = connect(mapStateToProps)(ConnectedList);
我会理解，如果函数看起来是：List常量，则它被分配给它：
const List = connect(mapStateToProps);
但是，(ConnectedList)在这个声明中有什么作用?技术名称是什么呢？
全剪：
import React from "react";
import { connect } from "react-redux";
const mapStateToPro
浏览 0提问于2018-08-15得票数 0
回答已采纳
2回答
Redux是如何将状态传递给mapStateToProps的？
javascript、reactjs、redux、react-redux
我正在尝试了解React和Redux是如何工作的，我正在研究来自的FuelSavingsPage.js。我知道actions在mapDispatchToProps中是从哪里来的，但我不明白state是如何传递给mapStateToProps的，或者dispatch是如何传递给mapDispatchToProps的。这是怎么发生的？
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 're
浏览 8提问于2016-08-20得票数 5
回答已采纳
1回答
以正确的方式组织？
reactjs、higher-order-components
我错误地写了两个版本的HOC实现，但它没有抛给我任何错误并按预期工作，所以我希望有人能向我解释其中的区别。requireAuth是高阶组件
首先我有一个组件，如下所示
import requireAuth from 'somepath';
class App extends Component {
...
}
export default connect(null, actions)(requireAuth(App));
下面是我的requireAuth
import React, { Component } from 'react';
import {
浏览 0提问于2018-08-12得票数 0
回答已采纳
3回答
将注销组件重构为功能组件
javascript、reactjs、react-hooks
我正在将一些老的基于类的反应组件转换成函数组件。我偶然发现了一个logout类组件(我没有编写代码)，它如下所示：
import React from 'react';
import {
Text,
} from 'react-native';
import { connect } from 'react-redux';
import { deauthenticateUser } from '../state/actions';
class LogoutScreen extends React.Component {
浏览 5提问于2022-09-30得票数 1
2回答
如何与其他组件共享react-redux连接组件中的函数？
javascript、reactjs、redux、react-redux
我在一个React组件中定义了一个函数(initialize)，它可以分派一堆redux操作。
import { setData, doThing, doSomethingElse } from "redux/actions";
import { fetchData } from "services/api";
import { connect } from "react-redux";
class Basic extends Component {
initialize = () => {
const { setData
浏览 0提问于2020-02-20得票数 2
2回答
从组件A到其他组件的Redux传递函数
reactjs、react-redux、react-hooks
import React from "react";
import OtherComponent from "./OtherComponent";
class Main extends React.Component {
constructor(props) {
super(props);
this.runMyFunction = this.runMyFunction.bind(this);
this.myFunction = this.myFunction.bind(this);
}
runMyFunction(even
浏览 0提问于2019-05-22得票数 1
回答已采纳
3回答
如何在React.js中制作通用的“过滤器”高级组件？
javascript、reactjs、redux
我在我的React.js (+ Redux)应用程序中做了一个更高级的组件，以抽象出过滤从输入元素接收到的字符串的元素列表的功能。
我的过滤专案是，
filter.js
import React, { Component } from 'react'
export default function Filter(FilteredComponent) {
return class FilterComponent extends Component {
constructor(props) {
super(props)
}
浏览 3提问于2016-07-23得票数 0
回答已采纳
2回答
如何将react、router、redux和react-intl一起使用？
reactjs、react-router、react-intl
我们一直在使用react、react router和redux。现在我们想要添加injectIntl。我的语法有点问题，希望你能帮我。
import React, { Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { intlShape, injectIntl } from 'react-intl';
...
export default
浏览 114提问于2018-06-06得票数 0
1回答
函数样式响应本机组件成功调用Redux操作，但类样式组件没有
reactjs、react-native、redux、react-redux
我有一个功能风格--，在这里我可以愉快地调用我的Redux操作：
import * as React from 'react';
import {Text, View, StyleSheet, Dimensions} from 'react-native';
import MultiSlider from '@ptomasroos/react-native-multi-slider';
import {useSelector, useDispatch} from 'react-redux';
import {updateNumPo
浏览 1提问于2022-07-20得票数 0
回答已采纳
1回答
如何修复“无法设置未定义的”错误的属性“支持”
reactjs、redux
当我按下按钮'<‘’或'>‘>(增加或降低难度)时，我在PureComponent (react.development.js:444)上得到错误“未定义的属性”：无法设置属性’道具‘(react.development.js:444)。
我怎么才能修好它？
上面的代码要比实际的代码少得多，但是即使在这个大小的情况下，它也不能正常工作。
即使是“废话”也不会出现在控制台上。
StartMenu.js
import React from 'react';
import { connect } from 'react-redux';
浏览 0提问于2019-04-30得票数 0
回答已采纳
2回答
使ownProps在自定义中是自定义的
javascript、reactjs
我正在实现一个特殊的程序，它需要访问正在包装的组件的支持。这将以类似于redux在mapStateToProps和mapDispatchToProps中实现mapDispatchToProps的方式工作。
注意事项：我正在寻找一种方法，使道具被传递到一个自定义的特别，而不是如何使用react redux。我只提到react redux来说明我的用例。
我想做这样的事情：(请注意，这个例子不起作用)
const HOC = InnerComponent => {
console.log(InnerComponent.props.SomeProp)
return InnerC
浏览 1提问于2018-02-01得票数 1
回答已采纳
2回答
react本机导出默认多组件
react-native
我是React Native的新手，如何导出默认的两个组件
我有一个使用withNavigation和redux connect的类，我必须将它们作为默认导出才能正常工作。
import { withNavigation } from 'react-navigation';
import { connect } from 'react-redux';
.
.
.
export default connect(mapStateToProps, mapDispatchToProps)(ClassName);
export default withNavigatio
浏览 18提问于2019-11-08得票数 1
回答已采纳
2回答
在基于类的组件中使用分派给出无效钩子调用的错误
reactjs、typescript、redux、react-redux
我是react-redux的新手。我有这个代码，我正在使用react，redux和TypeScript。在这段使用基于类的组件的代码中，我想使用dispatch来调用动作来增加counter的值，但这给了我以下错误。
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of Re
浏览 34提问于2020-02-12得票数 2
回答已采纳
1回答
如何在也连接到Redux的组件中使用连接到Redux的高阶组件
reactjs、redux、react-redux
我正在尝试将使用Redux的Container与HOC包装在一起，它也使用Redux，这将我带到以下错误：
TypeError: Object(...) is not a function
> 112 | export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))
我一直在尝试自己解决这个问题，我猜解决方案与在导出我的HOC或我的Container时使用redux中的compose有关。
我将在这里发布整个HOC，并且只在HOC块下面的containe
浏览 6提问于2020-05-16得票数 1
回答已采纳
2回答
我无法在Redux +Redux应用程序中使用mapDispatchToProps。
javascript、reactjs、react-native、redux
在我的React + Redux应用程序中，我试图使用mapDispatchToProps实用程序，但是每当我将它放入connect(mapStateToProps, mapDispatchToProps)中时，它就会给出一个错误，说明Uncaught TypeError: dispatch is not a function at new ReduxApp (ReduxApp.js:42)
这里面有什么问题呢？PS:下面是文件
ReduxApp.js
import React from 'react';
import { Router, Route } from '
浏览 0提问于2018-08-07得票数 1
回答已采纳
2回答
未提供redux调度
reactjs、ecmascript-6、redux、redux-thunk
最初，我在index.js上调用这个函数来触发我的主要数据的负载：
const store = configureStore();
store.dispatch(doStuff());
现在，我想做下一步，并在页面级别加载这些数据(似乎更好)。
我是以的Gaearon的这篇文章为基础的
我有这样的代码：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { PropTypes } from 'prop-types&#
浏览 0提问于2018-01-19得票数 0
回答已采纳
2回答
每次要在redux中访问状态时，都必须声明mapDispatchToProps和mapStateToProps吗？
javascript、reactjs、redux、react-redux、state
我只是在使用redux，在每次访问redux状态时，我都会问是否必须声明mapState和mapDispatch。
我已经用它的存储和动作/动作创建者/类型设置了redux。我还利用了react redux库中的连接自组织功能。我有两个组件，共享状态和操作。每当我想访问这些属性时，是否也必须传递mapDispatchToProps和mapStateToProps并连接函数？我知道有一些钩子可以做到这一点，但我要求没有钩子。我将提供下面的代码。谢谢!
// CarContainer
import React from "react";
import { connect } fr
浏览 2提问于2020-06-05得票数 0
回答已采纳
3回答
React/Redux导出默认连接()似乎没有连接到提供程序
reactjs、react-redux、mern
解决了，检查我的答案
我正在通过youtube播放列表学习MERN Stack。当我到达28点04分时，他忘了把他的组件与“reached”连接起来，这让我卡住了。我跟随他解决问题的方式，但由于某种原因，我的想法似乎没有联系。没有道具传递给我的ItemModal组件。所以我花了3个小时进行调试，最后得出结论，我觉得奇怪的是，只有当js命名为ShippingList时，connect()才能工作……当我将ShippingList重命名为另一个名称并更新引用时，它不再工作了.请参阅下面的一些片段
我想在创建这个商店的时候，我不需要给它识别一个组件。所以我现在惊呆了。
想知道你们能不能复制一下，请找
浏览 0提问于2019-03-21得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
