首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >React:如何“记住”最初的道具

React:如何“记住”最初的道具
EN

Stack Overflow用户
提问于 2017-08-27 20:39:27
回答 4查看 738关注 0票数 0

我正在使用React和Redux,并构建了一个简单的todo-app。现在,我想为用户创建一个保存按钮,它将保存对待办事项所做的任何更改(例如,更改文本)。因此,保存按钮需要以某种方式知道是否对待办事项进行了任何更改。

例如,最初我们有这些来自Redux的待办事项:

代码语言:javascript
运行
AI代码解释
复制
const todos = [
    {
        id: 0,
        text: 'Learn Redux',
    },
    {
        id: 1,
        text: 'Learn React',
    }
]

但是用户对待办事项做了一些更改!

代码语言:javascript
运行
AI代码解释
复制
const todos = [
    {
        id: 0,
        text: 'Eat a cookie',
    },
    {
        id: 1,
        text: 'Read a book',
    }
]

所以我的问题是,我如何才能检测到这些变化?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-08-28 07:39:20

因为这样做的重点是学习React + Redux的最佳实践,所以最好的方法是让你的道具成为来自Redux状态的待办事项,然后让你的组件状态成为当前正在变化的状态。因此,在上面的示例中,

提供给组件属性的Redux状态是

代码语言:javascript
运行
AI代码解释
复制
const todos = [
    {
        id: 0,
        text: 'Learn Redux',
    },
    {
        id: 1,
        text: 'Learn React',
    }
]

然后组件状态是

代码语言:javascript
运行
AI代码解释
复制
const todos = [
    {
        id: 0,
        text: 'Eat a cookie',
    },
    {
        id: 1,
        text: 'Read a book',
    }
]

在你的构造函数中,你可以这样做(_是一个像lodash这样的库):

代码语言:javascript
运行
AI代码解释
复制
constructor(props) {
   super(props);
   this.state = { todos: _.clone(props.todos) };
}

该组件只会操作this.state.todos,然后当您准备保存时,您可以将this.state.todosthis.props.todos进行比较,以了解情况发生了怎样的变化。

然后,发送将待办事项保存到redux状态的操作(例如:save(this.state.todos)

你的组件应该通过像reselect这样的库来监听Redux的状态,并且它的属性会被更新。

票数 0
EN

Stack Overflow用户

发布于 2017-08-27 22:17:48

有很多方法可以做到这一点。您可以使用构造函数来记住初始属性,方法如下:

代码语言:javascript
运行
AI代码解释
复制
constructor(props) {
   super(props);
   this.initialProps = props;
}

由于您使用的是redux,因此您也可以在中间件中处理此问题,中间件的主要工作是检查并查看您尝试保存的数据是否与存储中保存的值不同。Here是redux中的中间件文档。

票数 0
EN

Stack Overflow用户

发布于 2017-08-28 01:17:35

当您调度一个更改待办事项的操作时,您可以调度一个操作来通知保存按钮。另外,如果你的reducer是纯的,它不会改变之前的状态,所以很容易知道待办事项是否改变了。如果对象引用不同,则会更改。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45909141

复制
相关文章
如何在 React TypeScript 中将 CSS 样式作为道具传递?
React 是一种流行的 JavaScript 库,用于构建动态用户界面。最近,它与 TypeScript 的结合变得越来越流行。由于 TypeScript 的静态类型检查和更好的 IDE 支持,它使得使用 React 更加容易和可维护。当开发 React 应用程序时,我们通常需要使用 CSS 样式来渲染组件。本文将介绍如何在使用 React TypeScript 时,将 CSS 样式作为道具(Props)传递给组件。
网络技术联盟站
2023/06/07
2.3K0
如何轻松记住 Linux 命令
对于Linux的使用者来说,无论是菜鸟阶段还是大神阶段,往往都会对于命令行心存戒备:大量需要记忆的命令实在是令人痛苦。掌握命令是使用高效命令行工具的前提。 然而,这种痛苦的学习几乎没有捷径可走,你必须
小小科
2018/05/03
7970
如何轻松记住 Linux 命令
如何成为元宇宙最初的少数人?
👆点击“博文视点Broadview”,获取更多书讯 第49次《中国互联网络发展状况统计报告》显示,截至2021年12月,我国网民共计10.32亿,互联网普及率73.0%;1997年第一次统计发布时,我国上网人数仅有62万。也就是说,25年内互联网实现了从无人知晓到接近全员普及。全球互联网的发展程度也大致相近。 量变将引起质变,互联网的下一形态会是什么? 2021年答案揭晓:元宇宙,是下一个25年(或者更快),我们要去的地方。 在元宇宙里,你可以选择更数字化的生活、工作和娱乐,体验难分真假的沉浸式感受,它
博文视点Broadview
2022/04/15
7150
如何成为元宇宙最初的少数人?
如何轻松记住 Linux 命令
对于Linux的使用者来说,无论是菜鸟阶段还是大神阶段,往往都会对于命令行心存戒备:大量需要记忆的命令实在是令人痛苦。掌握命令是使用高效命令行工具的前提。 然而,这种痛苦的学习几乎没有捷径可走,你必须一点一点记忆、练习才行。不过天无绝人之路,在你学习的初级阶段还是有不少工具可以帮到你的忙。 history 首先我想提名的是命令行工具 history ,使用这条命令时你可以查看你此前使用过的命令。包括使用最为广泛的Bash在内的这种Linux Shell ,都会有一个专门的文件夹来储存你输入过的命令。
企鹅号小编
2018/02/11
1.2K0
如何轻松记住 Linux 命令
如何轻松记住 Linux 命令
(点击上方蓝字,快速关注我们) 英文:Nick Congleton,翻译:Linux中国/DarkSun linux.cn/article-9093-1.html Linux 新手往往对命令行心存畏惧
精讲java
2018/07/03
9020
如何区分并记住常见的几种 Normalization 算法
七期飞跃计划还剩12个名额,联系小编,获取你的专属算法工程师学习计划(联系小编SIGAI_NO1)
SIGAI学习与实践平台
2019/07/01
2.3K0
如何区分并记住常见的几种 Normalization 算法
【SDL最初实践】开篇
记得在之前参加面试时,被问到SDL,勉强把其流程稍加解释的给背了出来,面试官一脸不屑的样子记忆犹新。因为那时负责的是乙方安服技术团队,针对甲方推崇但又没几家实际落地并做好的SDL,的确缺少经验。后来,在网上找了很多相关资料,但大多都是没血没肉的理论指导性文章,落地的案例寥寥无几。再后来,主动联系了当初的面试官,请教他们公司的SDL如何开展,得到的回复却是:这玩意儿真正落地的公司比较少,都是一二线互联网公司在玩;外面那些paper都太形而上了,没有落地空间,有些概念可以参考,跟领导吹吹牛逼是可以的。
aerfa
2019/01/02
1.7K0
【SDL最初实践】安全设计
“为了减少产品设计带来的安全隐患,避免后续发现问题时,对功能实现流程甚至程序架构大刀阔斧改动带来高昂代价。在产品设计阶段,需要加入必要的安全活动,减少并消除产品安全隐患,纵深提升业务安全能力。”
aerfa
2019/11/08
1.9K0
【SDL最初实践】安全设计
【SDL最初实践】安全响应
“ 漏洞总是在不断的涌现,即使是前面的各项安全活动中均已达标,产品在上线后依旧会面临新增漏洞的攻击。对于安全风险的警觉和发现能力以及渠道,需要逐步建立并完善、运营。”
aerfa
2020/03/04
1.5K0
shiro的记住我
1 2 配置applicationContext-shiro.xml文件 <!-- 8.1 记住我Cookie --> <bean id="rememberMeCookie" class="org
用户5927264
2019/07/31
6360
【SDL最初实践】安全需求
“ 在软件安全开发生命周期中,安全需求并不是那么好做,具备投入人力大、效果不显著等特点,但其作用影响了整个软件的安全质量和周期。在没有系统化流程之前,可以量体裁衣,根据实际情况加入必要的安全活动。”
aerfa
2019/04/30
2.4K0
【SDL最初实践】安全需求
【SDL最初实践】安全培训
“ 在企业信息安全建设的工作中,安全培训具备相对易做、效果显著、对业务系统影响较小等特点,常常会被列为首先要做的事情。作为SDL的第一个环节,其内容应该贯穿整个SDL,可以根据不同的环节选择性制作相关培训内容,针对不同的人群进行“专业”持续培训。”
aerfa
2019/03/06
1.5K0
【SDL最初实践】安全培训
detour使用教程_devour怎么使用道具
大家好,又见面了,我是你们的朋友全栈君。 Detours的安装: 下载部分: 1.直接在百度搜”detour”,进对应的网站下载。 2.或以下链接 https://www.microsoft.com/
全栈程序员站长
2022/09/20
1.7K0
detour使用教程_devour怎么使用道具
【SDL最初实践】安全测试
SDL可视作为软件安全方面的纵深防御,到了测试阶段也就代表着软件架构与设计已经定型、第三方开源组件的引用已基本不太可能改变、前面各环节的漏网安全bug已迎来最后一次发布前的检测。
aerfa
2019/12/19
1.6K0
【SDL最初实践】安全审核
“在本环节中,已经不再涉及到SDL中的“工具”,转而向“流程”。产品发布前的最后一道关卡,做最终的安全验收。无论是否能满足安全质量要求,产品均有可能发布上线,但一定得有兜底的措施。”
aerfa
2020/02/20
1.1K0
【SDL最初实践】安全开发
在确定产品原型与功能之后,便交由开发负责推进。然而关注点大多仅在于业务流程与功能点的实现,具体使用的技术决定于公司技术栈和个人能力,对于带着安全意识去编码这件事儿,大多都没太在意。
aerfa
2019/11/08
1.2K0
【SDL最初实践】安全开发
SDL最初实践(完结)Paper下载
“ 我的SDL最初实践就此告一段落,一个系列的终结想必也是另一个系列的开始。希望更多同行一起交流、分享。”
aerfa
2020/03/04
8803
[译] 优化 React APP 的 10 种方法
在开发任何软件(尤其是Web应用程序)时,优化是每个开发人员考虑的第一件事。像Angular,React等其他JS框架都包含了一些很棒的配置和功能。在这里,我将回顾有助于您优化应用性能的功能和技巧。
腾讯IVWEB团队
2020/08/10
34K0
如何让Git记住你的GitHub Token,避免每次都要重复输入?
从2021.08.13开始, GitHub不再支持账号和密码的方式来pull和push代码了,取而代之的是官方推出的Token。
marsggbo
2021/10/09
5.5K0
重置git本地记住的密码
1. 进入“控制面板”=>"用户账户"=>"凭据管理器"=>"管理Windows凭据"
跟着阿笨一起玩NET
2021/08/18
1.6K0

相似问题

最初填充的道具值,然后没有出现在react中。

12

如何重载react道具?

111

如何使用道具组件react发送道具

10

React如何调用道具

30

如何注入React组件道具?

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文