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

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

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

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

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

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

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

提前感谢!

对象

代码语言:javascript
代码运行次数:0
运行
复制
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
运行
复制
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 23:58:48

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

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

const newDate = new Date(prevDate);

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

https://stackoverflow.com/questions/64092151

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档