将参数传递给mapDispatchToProps()

2024-04-04

我不能撒谎,我对 React-Redux 有点困惑。我认为很多操作都需要参数(例如从商店中删除项目),但即使我仍在阅读如何以这种方式从组件分派来传递参数,现在大约 2 小时,我没有得到任何答案。我被尝试过this.props.dispatchmapDispatchToProps,我总是得到this.props... is not a function信息。这就是我想做的:

  const getTheArray = (array) => {
    return {
      type: 'GET_ARRAY',
      array
    }
  }
    
    class Example extends......
    
    componentDidUpdate(){
    //i have a button, and when it clicked, turns the status: 'deleted'
        if (this.state.status === 'deleted'){
            fetch('http://localhost:3001/deleteitem', {
                method: 'post',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    id: this.props.id
                })
            })
            .then(res => res.json())
            .then(data => this.props.deleteFromArray(data))
            .catch(err => console.log(err)) 
        }
    }




function mapStateToProps(state) {
    return {
        array: state.array
    };
}
function mapDispatchToProps(dispatch) {
    return({
        deleteFromArray: (array) => {dispatch(getTheArray(array))}
    })
}
  
export default connect(mapStateToProps, mapDispatchToProps)(Example);

这不是我需要使用操作进行分派的唯一地方,其中操作的对象属性取决于传递给函数的另一个属性,所以我真的想做,将属性传递给操作并分派它的最佳方法是什么在反应组件内。


import { bindActionCreators } from "redux"

function mapDispatchToProps(dispatch) {
    return(bindActionCreators({
        deleteFromArray: (array) => {getTheArray(array)}
    }, dispatch))
}

在你的 dumbComponents 中,只需调用 this.props.deleteFromArray([1,2,3,4])

这应该可以解决问题。您不受调度约束

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

将参数传递给mapDispatchToProps() 的相关文章

  • 生成日期并将新属性添加到对象数组中

    我无法控制数据列表 但我需要将其映射到日期范围数据 数据列表如下所示 只有 from 和 to date from 2017 05 06 00 00 00 date to 2017 05 08 23 59 59 state name San
  • 防止在 MaterializeCSS 下拉菜单中单击时关闭该下拉菜单

    我正在为当前项目使用 Materialize css 并且我的下拉菜单中包含一些输入表单 下拉菜单可以选择关闭 单击外部 dropdown content 单击内部 dropdown content 点击 dropdown button 我
  • 如何在不同页面上使用不同类型的导航栏组件

    我为我们项目的两个不同子系统创建了两个不同的导航栏组件 App js function App return lt gt
  • React Map 总是使用最后一个元素的数据调用方法

    我正在制作一个社交媒体应用程序 我正在循环浏览所有评论并将其显示在用户界面上 当我单击编辑时 最后一条评论的文本总是显示在输入中 我尝试了很多不同的方法 改变了结构 使用bind来绑定上下文 但没有任何帮助 我正在使用 React Mate
  • React:如何从react-router-dom通过链接传递道具?

    我正在努力通过title从道具到我的Dishes组件使用但找不到解决方案 有什么建议么 import Link from react router dom const Category title gt return title expor
  • addEventListener 通过映射调度来反应 redux

    我目前正在尝试将事件侦听器添加到我在反应中制作的应用程序 我通过连接到运行的 componentDidMount API 来做到这一点只有一次该组件已渲染 仅此而已 我的问题是我正在使用connect from react redux将我的
  • 错误找不到“pages”目录。请在项目根目录下创建一个”

    以前我的项目设置是 public next src pages components assets next config js 这工作正常 但我将结构更改为以下 public src client next config js jscon
  • Nextjs 无法在生产环境中的“.next”目录中找到有效的构建

    我正在 docker 中运行我的应用程序 但我的生产构建和启动脚本仅在 docker 环境中失败 虽然node env开发在docker环境下运行良好 这是我的脚本 无法进行生产构建并启动服务器 我正在使用nodemon和babel bui
  • 渲染作为 Prop 传入的 Component

    我怎样才能渲染一个StyledComponent它是作为道具传入的吗 我正在传递一个Spinner组件到我的BarComponent作为渲染的道具 我尝试使用 this props icon in my BarComponent在下面的示例
  • 使用 nginx 在云上部署 django 和 React

    我有一个 digitalocean 服务器 并且已经使用 Gunicorn 和 nginx 部署了 Django 后端服务器 如何在同一台服务器上部署 React 应用程序 您可以构建 React 应用程序并使用 Nginx 提供其静态文件
  • 提及列表和表情符号顶部位置 (Draft.js)

    您能帮我如何将其位置从下到上更改吗 我想在文本顶部而不是底部显示提及列表 关于表情符号列表的同样问题 示例链接 https www draft js plugins com plugin emoji 你可以通过以下方式实现它position
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • 在 React 应用程序的 shell 脚本中设置环境变量

    我正在尝试在 powershell 和 bash 脚本中设置一些环境变量 并在 ReactJS 应用程序中读取它们 shell脚本很简单 env AUTHDOMAIN some domain com env AUTHCLIENTID bun
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • 如何在reactjs中访问悬停状态?

    我有一个侧面导航 里面有很多篮球队 因此 当其中一个团队悬停在上方时 我想为每个团队显示不同的内容 另外 我正在使用 Reactjs 所以如果我可以有一个可以传递给另一个组件的变量 那就太棒了 React 组件在其顶级界面中公开所有标准 J
  • webpack 4 React loadable 不会根据卡盘点分割供应商

    我目前正在使用 webpack 4 和 React loadable 来创建块 它实际上分块取决于断点 然而 供应商规模保持不变 React loadable 还不支持 webpack 4 吗 或者我缺少一些设置 css 实际上似乎被分成了
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • 卸载 React 时删除事件监听器

    我有更高阶的组件 反应如下 export default function InnerComponent class InfiniteScrolling extends React Component constructor props s
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • 在哪里使用带循环的 return 语句?

    有时我会感到困惑where使用return陈述 我明白它的作用 只是我没有正确理解它的位置 这是相同代码的简短示例 正确方法 def product list list of numbers c 1 for e in list of num
  • 使用 URI (Xamarin) 的 Android FFImageLoading

    我正在尝试从光标加载联系人图像 因此我有每个图像的 URI 但我想使用 FFImageLoading 库将这些图像添加到视图中 以便我可以轻松加载占位符并进行圆形变换 但是 我在使用具有 URI 的库时遇到困难 我尝试使用 Path 将 U
  • android:如何从twitter获取趋势?

    我想从 Twitter 获取趋势 任何人都可以帮我解决这个问题吗 我已经使用以下方式登录了login button并且获得了活跃的会话 现在问题是如何获取趋势标签 https dev twitter com rest reference g
  • 如何在 Rmarkdown 演示文稿(滑动)中回显代码之前显示块输出?

    我最近开始在 Rmarkdown 中使用 Slidy 演示模板 并且喜欢每张幻灯片如何允许您向下滚动以获取更多内容 我使用它的一种方法是与我的学生共享绘图 请参阅下面的示例代码 在一张幻灯片上 我可以显示绘图以及用于创建绘图的确切代码 可以
  • 为什么 VSCode 在启动调试器之前不激活 conda?

    当我在 VSCode 中启动调试器时 只有在调试过程因 缺少必需的依赖项 导入错误而停止后 conda 环境才会被激活 立即重新启动调试器就可以正常工作了 此问题发生在 Anaconda base 和其他环境中 测试代码 import pa
  • 使用 ui-router(AngularJS) 时,$rootScope.$on("$routeChangeSuccess) 或 $rootScope.$on("$stateChangeSuccess) 不起作用

    我在应用程序中使用 UI router 来嵌套视图 但同时我想在路由更改时监听事件 在使用 UI router 之前 routeChangeSuccess 触发得很好 但在 ui router 之后 它不会触发 文档建议使用 viewCon
  • 将csv字符串读入向量C++

    csv转vector有很多选项 包括读取 csv 文件并将其所有数据添加到 C 中的向量中 https stackoverflow com questions 60322479 read a csv file and and add its
  • 设计决策:(VB.NET)我应该创建一个类或模块来轻松连接到多个数据库之一吗?

    基本上 我们有三个数据库可以从中获取数据 一种是 SQL Server 数据库 一种是 Access 数据库 连接起来特别烦人 因为我们必须映射网络驱动器等 最后一个将是 Oracle 数据库 当 IT 最终授予我们权限时 我正在考虑创建一
  • 调试时无法进入迭代器块 (C#)

    我正在尝试调试从单元测试项目执行的代码 但是当我尝试进入一个方法时 它只是直接传递到下一行 并且不会命中该方法内的断点 该方法位于不同项目中的一个类上 但所有代码都是在调试模式下构建的 我已经尝试清理和重建解决方案 但没有任何乐趣 然而 自
  • 我可以在 Docker for Mac 中使用不安全的 Kubernetes API 端点吗?

    当我在 Docker for Mac 中运行 Kubernetes 时 Kube API 似乎只能从安全端点访问https 本地主机 6443 https localhost 6443 通过 minikube 我可以使用 Kube API
  • Sql CE 多条语句不一致

    长期以来 您确实可以使用 SQL CE 执行多个语句 https stackoverflow com questions 6970502 can i execute multiple statements in sql server com
  • 在 Windows 中执行全屏抓取

    我正在研究一个想法 涉及全面捕获屏幕 包括窗口和应用程序 对其进行分析 然后将项目作为叠加层绘制回屏幕上 我想学习图像处理技术 如果我可以直接访问 Windows 屏幕 我可以获得大量的数据来处理 我可以用它来构建以前从未见过的自动化工具
  • 获取分离片段中的上下文/活动?

    有一个类似的问题 https stackoverflow com questions 20464273 get the application context in fragment in android大多数答案建议使用在哪里getAct
  • 未捕获的类型错误:使用 $.param() 序列化传单数据时无法读取未定义的属性“lat”

    我想先说一下 我对 JavaScript 很陌生 我正在尝试使用 Leaflet 和 AJAX 调用来发布用户位置和地图边界 在我的事件处理程序中stateUpdater onLocationFound日志语句打印出正确的用户坐标和地图边界
  • 具有后备功能的 HTML5 视频标签

    我正在寻找在 html 中嵌入视频和音频的解决方案 新的 videotag 支持 ogg 和 mp4 但是否有针对 flv 和其他格式的后备解决方案 例如 如果我想嵌入一个 ogg 它会检查是否支持html5 如果不支持 它会使用后备 如果
  • 是否可以创建一个 git 存储库,其中分支是来自其他存储库的克隆?

    情况如下 我继承了两台独立的机器 一台用于 开发 另一台是生产机器 问题是 它们当然不同步 为了使情况更加清晰 我在每台计算机上创建了应用程序目录的独立 git 存储库 我现在希望能够比较这些存储库 以便找出它们之间的不同之处 我的想法是创
  • WCF TCP 客户端 - 如何使用它们的基本指南?

    我有一个 WCF 服务并希望使用 TCP 绑定连接到它 这一切都很好 但是你应该如何处理客户呢 我注意到 如果您为每个调用创建一个新客户端 它不会重新使用该通道 并会留下一堆 TCP 连接 直到超时 创建客户端 调用其方法 然后关闭它是正常
  • HTML 5 视频流 .ism 文件?

    我有一个带有媒体服务 4 0 的 IIS 7 0 服务器设置 我创建了一个非常简单的 html 5 页面 其中包含video以其source指向一个 ism文件 是否可以使用 html 5 中的 ism 文件的清单来播放视频 就像在 sil
  • WordPress 插件 WooCommerce,自定义支付网关设置未保存

    我正在为 WordPress 插件 WooCommerce 开发自定义支付网关 我似乎无法保存支付网关的设置 当我在字段中输入信息然后单击 保存 时 页面刷新 所有字段均为空白 我究竟做错了什么 这是我的代码
  • 将参数传递给mapDispatchToProps()

    我不能撒谎 我对 React Redux 有点困惑 我认为很多操作都需要参数 例如从商店中删除项目 但即使我仍在阅读如何以这种方式从组件分派来传递参数 现在大约 2 小时 我没有得到任何答案 我被尝试过this props dispatch