React JS中点击事件无法更新变量问题求助

问题描述 #

我是React JS新手，开发了一个React应用，预期点击按钮时可将当前日期增加8个月77天，但功能未正常生效。调试时多次点击按钮，console.log()显示date值已变化，但页面视图未更新。

问题原因分析 #

核心问题是直接修改了State中的引用类型对象：

• Date属于引用类型，你在ChangeDate函数里直接调用date.setDate()和date.setMonth()修改了原State中的date对象，此时对象的引用地址并未改变。
• React的useState通过浅比较判断状态是否变化，只要引用地址不变，就会判定状态未更新，因此不会触发组件重渲染，页面视图也就不会同步更新。

代码修改建议 #

需要创建新的Date对象，基于原日期进行修改后再更新状态，以此触发组件重渲染：

import React from 'react';

const DateTest = () => {
    const [date, updateDate] = React.useState(new Date())
    
    const ChangeDate = () => {
        // 复制原日期生成新对象，避免修改原State
        const newDate = new Date(date);
        newDate.setDate(newDate.getDate() + 77);
        newDate.setMonth(newDate.getMonth() + 8);
        updateDate(newDate);
        console.log("value of date is: ", newDate);
    };
    
    return(
        <>       
            <h1>{date.toString()}</h1>
            <button onClick={ChangeDate}>change</button>
        </>
    )
}

export default DateTest;

额外说明 #

注意setMonth和setDate的执行顺序会影响最终结果：比如当前日期是31号时，若先加月份遇到无31号的月份，Date对象会自动调整日期，若有特殊需求可额外做日期校验处理。

内容的提问来源于stack exchange，提问作者Justin Panning Pan