React中未调用setState却修改state变量的问题咨询

问题根源 #

Date是引用类型，当你写const newD = startDate时，这不是复制一个新的Date对象，而是让newD和startDate指向内存里的同一个Date实例。调用setTime()这类方法会直接修改这个实例的内容，所以原state里的startDate自然会跟着变——跟你调没调setStartDate没关系，因为你改的是同一个对象本身。

正确的处理方式 #

必须创建原Date对象的独立副本，常用的几种写法：

• 用Date构造函数直接拷贝：

const newD = new Date(startDate);

• 基于时间戳创建新对象：

const newD = new Date(startDate.getTime());

• ES6扩展运算符（简洁写法）：

const newD = new Date(...startDate);

修改后的完整代码示例（顺便补了React规范和useEffect依赖）：

import React, { useState, useEffect } from 'react';
import momentt from 'moment-timezone';

const MyComponent = () => {
  const [startDate, setStartDate] = useState(new Date('Oct 30 2022 00:00:00 GMT-0600 (Mountain Daylight Time)'));
  const timezone = "America/New_York";

  useEffect(() => {
    console.log("初始startDate", startDate.toISOString());
    // 创建独立副本，避免修改原state对象
    const newD = new Date(startDate);
    
    const applyOffset = newD.setTime(newD.getTime() - newD.getTimezoneOffset() * 60_000);
    const actualTime = new Date(applyOffset).toISOString().replace("Z", "");
    const toTz = momentt.tz(actualTime, timezone).format();
    const getUTCTime = momentt.utc(toTz).format();

    console.log("修改后startDate", startDate.toISOString()); // 现在不会被修改了
  }, [startDate, timezone]);

  return <div></div>;
};

export default MyComponent;

额外注意点 #

1. React状态里的引用类型（对象、数组、Date等）绝对不能直接修改，必须创建副本后再通过setState更新，否则React可能检测不到状态变化，组件无法重新渲染。
2. React组件名必须首字母大写，这是官方规范，避免和原生HTML标签冲突。
3. useEffect一定要加上正确的依赖项，防止无效重复执行或遗漏状态更新。

内容的提问来源于stack exchange，提问作者KingJoeffrey