我正在学习如何在一分钟内做出反应,做一个基本的日历应用程序,它很大程度上依赖于使用Date()对象。我试图显示选定的月份,这是通过点击两个字体可怕的箭头图标改变。
使用上下文API和useState,我用"setDateObject“回调更新日期,该回调使用date对象的setter函数"setMonth()”。
只需要做一些控制台日志就可以看出,该日期正在成功地更新状态,但显示在< p>标记中的日期没有被重命名。我尝试用一个硬类型的对象将date对象切换出去,并在"incrementMonth“方法中手动增加月份,这确实触发了一个重命名器。
所以,要么我误解了什么,要么使用setter函数来更新date对象,而不是触发重发程序。这是任何人都有经验的吗?
提前感谢!
对象
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
上下文
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>
)
}
发布于 2020-09-29 15:58:48
React试图在重新渲染方面变得聪明。如果新状态和旧状态引用相同的值,则为它不会重新渲染。
实际上,您正在使用相同的date对象调用setDateObj
,尽管您已经更改了它的内部数据。换句话说,如果是newDate === prevDate
,它就不会重新呈现。您可以通过复制日期来避免这种情况:
const newDate = new Date(prevDate);
https://stackoverflow.com/questions/64092151
复制