首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >setter方法是否在React中触发DOM重选器?

setter方法是否在React中触发DOM重选器?
EN

Stack Overflow用户
提问于 2020-09-27 10:53:15
回答 1查看 313关注 0票数 1

我正在学习如何在一分钟内做出反应,做一个基本的日历应用程序,它很大程度上依赖于使用Date()对象。我试图显示选定的月份,这是通过点击两个字体可怕的箭头图标改变。

使用上下文API和useState,我用"setDateObject“回调更新日期,该回调使用date对象的setter函数"setMonth()”。

只需要做一些控制台日志就可以看出,该日期正在成功地更新状态,但显示在< p>标记中的日期没有被重命名。我尝试用一个硬类型的对象将date对象切换出去,并在"incrementMonth“方法中手动增加月份,这确实触发了一个重命名器。

所以,要么我误解了什么,要么使用setter函数来更新date对象,而不是触发重发程序。这是任何人都有经验的吗?

提前感谢!

对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React, { useContext } from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

// Styling
import style from "../styles/Calendar.css"

// Assets
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"
import { faArrowRight } from "@fortawesome/free-solid-svg-icons"

// Contexts
import { DateContext } from "./context/DateContext.js"

const Calendar = () =>  {
    const [dateObj, setDateObj] = useContext(DateContext)
    const monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    const incrementMonth = () => {
        setDateObj(prevDate => {
            let newDate = prevDate
            newDate.setMonth(prevDate.getMonth() + 1)
            return newDate
        })
    }
    
    const decrementMonth = () => {
        setDateObj(prevDate => {
            let newDate = prevDate
            newDate.setMonth(prevDate.getMonth() - 1)
            return newDate
        })
    }
    
    return(
        <div style={style} className="CalendarWrapper">
            <div className="MonthSelector">
                <FontAwesomeIcon icon={faArrowLeft} onClick={decrementMonth} className="hoverArrow"/>
                <p>{ `${ monthArray[dateObj.getMonth()] } ${ dateObj.getFullYear() }` }</p>
                <FontAwesomeIcon icon={faArrowRight} onClick={incrementMonth} className="hoverArrow"/>
            </div>
        </div>
    )
}

export default Calendar

上下文

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React, { useState, createContext } from "react"

export const DateContext = createContext(null)

export const DateProvider = props => {
    const [dateObj, setDateObj] = useState(new Date())
    return(
        <DateContext.Provider value={[dateObj, setDateObj]}>
            {props.children}
        </DateContext.Provider>
    )
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-29 15:58:48

React试图在重新渲染方面变得聪明。如果新状态和旧状态引用相同的值,则为它不会重新渲染

实际上,您正在使用相同的date对象调用setDateObj,尽管您已经更改了它的内部数据。换句话说,如果是newDate === prevDate,它就不会重新呈现。您可以通过复制日期来避免这种情况:

const newDate = new Date(prevDate);

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

https://stackoverflow.com/questions/64092151

复制
相关文章
Swift 类型转换
类型转换可以判断实例的类型,也可以将该实例在其所在的类层次中视为其父类或子类的实例。
赵哥窟
2020/07/28
1.1K0
Swift 2.2 多态和强制转换
 写在前面:     写点东西,就是想告诉自己,有时间其实你也在前进着,快慢不说,至少没停下吧!该有的都会有的。不瞎BB了,说主题,3.0 的多态和继承。     总觉得继承好像也没什么太多的可说的了,在项目中用到的还是挺多的,反倒。是多态,我也知道有这个特性,说实话自己也不知道该在哪里可以用的到。但很多东西你可能会用,但你也不知道为什么的时候,可能你才会感受到基础知识是有用的。   一:多态的概念: 相同类型的变量在调用同一个方法呈现出多种不同的行为特征,这就叫多态。先丢这里吧,看了下面的东西,再回过
Mr.RisingSun
2018/01/09
7210
Swift 2.2 多态和强制转换
Swift专题讲解十九——类型转换 原
        在Objective-C和Java中,任何类型实例都可以通过强转使编译器认为它是另一种类型的实例,这么做其实是将所有的安全检查工作都交给了开发者自己来做。先比之下,Swift中的Optional类型转换就会比较安全与可靠。
珲少
2018/08/15
7950
swift动画 —— 颜色渐变以及转换动画
这篇文章是通过结合使用CAGradientLayer、CABasicAnimation
CC老师
2022/01/14
2.1K0
swift动画 —— 颜色渐变以及转换动画
python 预测目标(y)的转换
LabelEncoder是一个可以用来将标签规范化的工具类,它可以将标签的编码值范围限定在[0,n_classes-1]。这在编写高效的Cython程序时是非常有用的,:class:LabelEncoder可以如下使用:
用户1359560
2018/08/27
4820
Swift3.0项目升级到4.2遇到问题
版权声明:转载请标明出处 https://blog.csdn.net/ZY_FlyWay/article/details/88824879
星宇大前端
2019/04/09
1.3K0
Swift入门:多态性与类型转换
因为类可以相互继承(例如CountrySinger可以从Singer继承),这意味着一个类实际上是另一个类的超集:B类拥有A类所拥有的所有东西,还有一些额外的东西。这反过来意味着你可以把B当作B型或者A型,这取决于你的需要。
韦弦zhy
2020/03/19
9590
Swift 如何使用Uint和Measurement转换单位
iOS 10引入了一种新的系统,用于计算距离,长度,面积,体积,持续时间以及更多测量值。让我们从简单的事情开始。如果您六英尺高,则可以创建一个Measurement实例,如下所示:
韦弦zhy
2020/03/23
1.4K0
C++ 中有符号类型到无符号类型的转换
为了更好地解释下面的代码,先来介绍一些背景知识,在我的计算机中, char 类型占 8 个比特位,那么, unsigned char 类型能表示的数的范围为 0 ~ 2的8次方 - 1,即 0 ~ 255,共 256 个数;int 类型占 32 个比特位,那么 unsigned 类型所能表示的数的范围为 0 ~ 2的32次方 - 1,即 0 ~ 4294967295,共 4294967296 个数,接下来看下面的代码:
用户7886150
2021/02/15
1.4K0
进制转换问题
以:整型数据类型的整数-为例 十进制-二进制 正数 十进制数除以2取余数; 余数倒叙排列; 得到得数字串即为十进制数对应得二进制数 示例:(30) 30(十进制) ===> 11110(二进制) 负数 将十进制转换为二进制数(不先管符号) 对该二进制数求反:0改成1、1改成0 再将该二进制数加1 总之就是将十进制数转换为二进制数求补码即为结果 示例:(-32) 32(十进制) = 00100000(二进制) 求反:11011111 加1: 11100000 结果:11100000(二进制) 二进制
小沐沐吖
2022/09/09
8370
进制转换问题
Swift 3到5.1新特性整理
Swift 5.0 最重要的自然是ABI Stability, 对此可以看这篇 Swift ABI 稳定对我们到底意味着什么 。
小刀c
2022/08/16
4.7K0
Swift 3到5.1新特性整理
a标签目标链接问题
2、确定文件寻找路径,因为css.html的父目录是css,而body.html在body目录下,所以需要先退到上一目录head然后再到body目录下寻找body.html
IT人一直在路上
2019/09/18
6090
a标签目标链接问题
现今 Swift 包中的二进制目标
在 iOS 和 macOS 开发中, Swift 包现在变得越来越重要。Apple 已经努力推动桥接那些缝隙,并且修复那些阻碍开发者的问题,例如阻碍开发者将他们的库和依赖由其他诸如 Carthage[1] 或 CocoaPods[2] 依赖管理工具迁移到 Swift 包依赖管理工具的问题,例如没有能力添加构建步骤的问题。这对任何依赖一些代码生成的库来说都是破坏者,比如,协议和 Swift 生成。
Swift社区
2022/12/12
1.9K0
Swift3项目升级到Swift5
源项目 https://www.jianshu.com/p/3228bfa3be7d 曾经Swift3写的,业余更新造成年久失修。
Light413
2020/04/24
1.3K0
Swift3项目升级到Swift5
Swift 5.2到5.4新特性整理
SE-0287提案改进了Swift使用隐式成员表达式的能力。Swift 5.4之后不但可以使用单个 使用,而且可以链起来使用。
小刀c
2022/08/16
2.3K0
Swift 5.2到5.4新特性整理
RN集成到现有原生应用-swift
创建一个空文件夹命名为你RN项目名称,在里面再新建一个文件夹/ios,把你现有的swift项目全部拷贝到/ios文件夹内。
用户6094182
2019/08/23
1.9K0
RN集成到现有原生应用-swift
Swift开发: 常见问题汇总
1、Unknown class xxClass in Interface Builder file. 这个问题出现在使用Xib时设置自定义类名的时候。在参考OC的写法创建了自定义的类,而且也在xib中
梧雨北辰
2018/04/24
7080
Swift开发: 常见问题汇总
内存转换Image到Icon
System.IO.MemoryStream mStream = new System.IO.MemoryStream();///创建内存流
Java架构师必看
2021/03/22
5270
当前时区时间 转换为 目标时区时间
张紫娃
2023/07/21
3240
当前时区时间 转换为 目标时区时间
目标时区时间 转换为 当前时区时间
张紫娃
2023/07/21
2480
目标时区时间 转换为 当前时区时间

相似问题

数据表的几个列的子列和赋值

27

使用子查询和唯一值插入

10

在实例表中插入几个外键

11

唯一键,插入忽略和表分区

20

插入表中包含标识列和外键列

34
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文