如何将多个 actionCreators 包装到一个 props 中?

2023-12-10

我收到以下错误:

Uncaught TypeError: this.props.dispatch is not a function

这是我的组件:

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as jobTitleSkillsActions from '../../actions/jobTitleSkillsActions';
import SkillList from './SkillList';
import * as userPositionActions from '../../actions/userPositionActions';

class SkillPage extends React.Component {

  componentDidMount() {
    this.props.dispatch(userPositionActions.loadUserPositions());
    var job_title_id = this.props.user_positions[0].job_title_id;    this.props.dispatch(jobTitleSkillsActions.loadJobTitleSkills(job_title_id));
  }

.....

const mapStateToProps = state => {
  return {
    job_title_skills: state.job_title_skills,
    user_positions: state.user_positions
  };
};

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      userPositionActions: bindActionCreators(userPositionActions, dispatch),
      jobTitleSkillsActions: bindActionCreators(jobTitleSkillsActions, dispatch),
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(SkillPage);

我在这里做错了什么?


根据我的评论,这将是绑定动作创建者的多个子对象的正确语法:

function mapDispatchToProps(dispatch) {
    return {
        userPositionActions : bindActionCreators(userPositionActions, dispatch),
        jobTitleSkillsActions: bindActionCreators(jobTitleSkillsActions, dispatch),
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将多个 actionCreators 包装到一个 props 中? 的相关文章

  • 如何禁用 Chrome 自动完成功能?

    我们想要禁用自动完成在 Chrome 浏览器中的 React JavaScript 应用程序中 我们尝试了互联网上提供的一系列解决方案 但没有任何效果 autoComplete off不可靠 其他方法也不可靠 目前这对我们来说非常重要 所以
  • 使用 React.lazy 时未捕获未定义的错误

    我正在尝试实施基于路由的代码分割 https reactjs org docs code splitting html route based code splitting正如 React 文档中提到的 这是添加延迟实现之前我的应用程序 这
  • 使用 Flask/WTForms 和 React 进行 CSRF 保护

    有没有人成功地为使用 React 作为受控组件 提交到 Flask 后端 最好使用 WTForms 的表单实现了 CSRF 保护 我看过很多部分答案 其中一个是关于 Django 的 但找不到任何关于 Flask 的明确答案 我的大问题似乎
  • 打字稿 - 字符串'不可分配给类型'FC

    我收到以下错误 Type props PropsWithChildren lt amount number gt gt string is not assignable to type FC lt amount number gt Type
  • 如何正确更新反应钩子状态内的数组

    我一直在尝试更新代表反应状态的数组内的对象 当输入的值更改时应该更新该对象 我可以自己找到一种方法来更新它 但我不太确定这是正确的方法 因为当我打开反应开发工具并转到组件选项卡并单击我正在处理的组件时 在输入输入时状态不会立即更新 并且为了
  • React-Native:如何定义 JavaScript 类

    我正在使用本机反应 我需要定义一个类 class myClass email string name string constructor setUser fbid string token string boolean 我试图在它自己的文
  • 如何在 React 组件测试中使用 data-testid 属性?

    我正在对一个简单的反应组件进行组件测试 我想渲染该组件 然后对其进行一些测试 问题是cy get 似乎没有找到基于的组件data testid属性 我用一个简单的方法测试了它div和div能找到就好了 我在检查时也注意到DOM在 cypre
  • 将 firestore 中的数据分配给变量

    我尝试使用 get doc 函数将 firestore 数据库中的变量分配给它们所尊重的值 我注意到它不会分配或更新这些值 我尝试使用异步和等待 但似乎无法使其工作 getFromDatabase nameOfCollection name
  • React - 检查元素在 DOM 中是否可见

    我正在构建一个表单 用户需要回答一系列问题 单选按钮 然后才能进入下一个屏幕 对于字段验证 我使用 yup npm 包 和 redux 作为状态管理 对于一种特定场景 组合 会显示一个新屏幕 div 要求用户进行确认 复选框 然后用户才能继
  • React-redux useDispatch() 未捕获类型错误

    我正在尝试创建一个简单的组件来使用 React Redux 钩子分派操作useDispatch 我收到一个错误 我已将组件修剪到发生错误的位置 当调用 useDispatch 函数时会发生这种情况 import useDispatch fr
  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e
  • React Native 反应导航 SafeArea 问题

    我更新了我的android项目 react navigation was 3 x 搬去5 x 决定实施必要的更改 但它不想工作 从反应导航页面复制了示例 但仍然显示相同的错误 有人知道问题出在哪里吗 当我用谷歌搜索一半的互联网时找不到解决方
  • Material-ui :从主题中提取颜色

    我想使用我的颜色material ui像这样的组件内的主题 const MyComponent props gt
  • Material-UI 4.8.1 API 更改 - 指定“组件”属性的新方法?

    Edit 这是 4 8 x 的打字错误 升级到 4 9 0 即可解决该问题 上版本4 8 0 以下代码编译并运行良好
  • 如何使用 setState 插入 React 的状态数组?

    我正在寻找在反应中修改和数组并在特定索引上插入元素 这就是我的状态 this state arr 我想做的是编译这个arr index random element 反应 js setState 语法 我试图做的是 this setStat
  • 有没有办法在 React 中自动播放音频而不使用 onClick 事件?

    我在尝试在 componentDidMount 中播放音频时收到此错误 未捕获 承诺中 DOMException play 失败 因为用户没有先与文档交互 componentDidMount document getElementById
  • 诊断 RangeError:React KeyEscapeUtils 中超出了最大调用堆栈大小

    背景 我们的 Web 应用程序是使用官方的 React Redux 绑定用 React 和 Redux 编写的 此网络应用程序中使用的另一个主要库是PaperJS http paperjs org 我们最近将其转变为 Redux 应用程序
  • 为什么我需要使用 setState 回调来设置依赖于第一个项目的 setState 完成的第二个状态项目的状态?

    在此 componentDidUpdate 方法中 执行 setState 将引号设置为从 fetch 返回的内容后 我必须使用回调再次执行 setState 将 randomQuoteIndex 设置为调用 randomQuoteInde
  • 从 Flask 运行 NPM 构建

    我有一个 React 前端 我想在与我的 python 后端 API 相同的源上提供服务 我正在尝试使用 Flask 来实现此目的 但我遇到了 Flask 找不到我的静态文件的问题 我的前端构建是用生成的npm run build in s
  • ‘state’未定义 no-undef

    我使用教程来学习 React 但我很快就陷入困境 在教程中 他们使用以下代码 import React Component from react class Counter extends Component state count 0 r

随机推荐

  • 如何手动构建 AVDepthData

    我想构建自己的深度图并保存带有深度信息的图像 例如肖像照片 所以首先我需要生成 AVDepthData 在挖掘了它的构建方式之后 我尝试重现它 func buildDepth let info AnyHashable Any kCGImag
  • 如何访问 xsl:output 属性中的 xsl:param?

    我想允许转换器在样式表中设置一个参数来指定需要多少个缩进空间 我已经尝试了 Dimitre Novatev 在答案中的所有建议here无济于事
  • ThisWorkbook 运行时错误 438

    我有一个 VBA 将唯一值从 Sheet1 复制并粘贴到 Sheet3 上 但是 当我运行 VBA 时 出现运行时错误 438 我的 VBA 看起来像这样 Sub UniqueList Application ScreenUpdating
  • Spring Kafka 中的 Kafka 消费者/生产者测试

    我目前正在研究我正在使用的 Kafka 模块spring kafka卡夫卡通信的抽象 我能够从实际实现的角度集成生产者和消费者 但是 我不确定如何测试 特别是集成测试 消费者周围的业务逻辑 KafkaListener 我试着跟随spring
  • 在 PyCharm 上导入 NLTK 时出错

    我试图在 PyCharm 中导入 NLTK 并收到以下错误 我使用的是 Mac OS 10 5 8 和 Python 2 7 6 可能发生什么事 我对编程完全陌生 如果我缺少一些基本的东西 我很抱歉 安装软件包失败 安装软件包 nltk 时
  • 在 R 包中包含 Shiny 应用程序:传输输入参数

    我正在尝试将 Shiny 应用程序作为 R 包的一部分运行 我按照 Dean Attali 网站上列出的说明进行操作 https deanattali com 2015 04 21 r package shiny app 如该网站所示 我在
  • postgresql 中的字符串文字和转义字符

    尝试将转义字符插入表中会导致警告 例如 create table EscapeTest text varchar 50 insert into EscapeTest text values This is the first part n
  • Firebase Storage getDownloadURL 背后的目的是什么

    根据这些docs 我明白一旦我们在存储中拥有了 firebase 路径 我们就可以通过调用来获取下载网址getDownloadUrl 在这条路径上的ref 我的问题是所有文档都建议首先获取下载网址 然后根据这些图像下载文件数据 但是我们可以
  • Ionic 找不到模块“../providers/auth-service/auth-service”

    我正在尝试在 ionic Angular 3 3 0 中创建登录 注册 我收到错误无法找到模块 providers auth service auth service 在login ts 文件中 请帮忙 auth service ts im
  • 选择具有给定 id 的元素的更快方法

    我有个问题 假设我们有以下 html 标签 div I am a div div 他的div存在于dom上 它不是由javascript生成的 如果我想在 javascript 中多次使用这个 div 哪种方法更好 将其存储在如下变量中 v
  • 在 R 中哪些包可以快速加载更大的数据

    在 R 中 数据通常加载到 RAM 中 是否有任何软件包可以将数据加载到磁盘而不是 RAM 中 查看bigmemory包 以及相关包 例如bigtabulate bigalgebra biganalytics 和更多 还有ff 尽管我发现它
  • 如何沿列迭代向下相乘?

    我在这件事上遇到了困难 不知道为什么 也许现在已经很晚了 我在 pandas 中有一个数据框 如下所示 1 10 2 11 3 20 4 5 5 10 我想计算每一行上面每一行的被乘数 例如 在第 3 行 我想计算 10 11 20 即 2
  • 如何使用 Selenium WebDriver 和 Java 查找损坏的链接

    我想验证网站上的损坏链接 并且我正在使用以下代码 public static int invalidLink String currentLink String temp public static void main String arg
  • 如何禁用文本选择突出显示

    对于作用类似于按钮的锚点 例如 此 Stack Overflow 页面侧边栏上标题为问题 Tags and Users 或选项卡 是否有 CSS 标准方法可以在用户意外选择文本时禁用突出显示效果 我意识到这可以用 JavaScript 来完
  • 如何使用 C# 从另一个表单按下按钮?

    我有两种形式 Form1 进行屏幕截图 Form2 有 2 个按钮来操作 form1 创建的屏幕截图 Form1 还有一个 隐藏 按钮 其中包含保存屏幕截图的方法 我的问题 如何从form2中单击form1的按钮 和 如何检查 form1
  • 如何编写正则表达式来仅匹配数字、字母和破折号?

    我需要一个只接受以下内容的表达式 数字 普通字母 无特殊字符 空格也是不允许的 例子 正则表达式应该匹配 this is quite alright 不应该匹配 this is not so lright 您可以使用 A Za z0 9 这
  • Excel - 将一个范围内的数据匹配到另一个范围内,并从匹配数据右侧的单元格中获取值

    我不太擅长 Excel 公式 我正在尝试弄清楚如何首先检查列中是否存在单元格值 如果存在 则获取下一个单元格的值 具体来说 我有一系列细胞 从 B31 到 B39 我想要做的是查看这些值是否出现在单元格 F3 到 F12 中 如果出现 则将
  • WebGL等角投影

    好吧 这里要疯了 我正在做一些 WebGL 我正在尝试制作一个等距立方体 我不想使用 Three js 我想首先了解我的代码出了什么问题 我一直在研究 我能找到的唯一教程似乎是针对 OpenGL 的 无论如何 这是我的drawScene函数
  • 查询缓存不起作用

    我已经打开query cache 并为其分配内存 query cache limit 1048576 query cache min res unit 4096 query cache size 16777216 query cache t
  • 如何将多个 actionCreators 包装到一个 props 中?

    我收到以下错误 Uncaught TypeError this props dispatch is not a function 这是我的组件 import React from react import PropTypes from pr