react-datepicker不支持API返回的时间格式，触发无限更新错误求助

嘿，我来帮你搞定这两个头疼的问题！你遇到的核心问题有两个：一是react-datepicker不直接认字符串格式的ISO时间，二是用moment时触发的「Maximum update depth exceeded」无限更新循环，咱们一步步来解决。

先搞清楚无限更新循环的原因 #

你之前直接在selected里写moment('2019-12-30T06:16:48.453Z')或者new Date('...')，每次组件渲染都会创建一个全新的对象/实例。react-datepicker会检测到selected属性的引用一直在变，就会触发重渲染，然后又创建新对象，这么来回循环就爆错了。

解决方案1：用原生Date对象 + useMemo缓存 #

其实原生JS的Date对象已经能直接解析ISO格式的字符串了，关键是要把转换后的Date对象缓存起来，避免每次渲染都生成新引用：

import { useState, useMemo } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const YourComponent = (props) => {
  // 假设API返回的时间是从props传入或者你用useState存储的
  const apiDateStr = '2019-12-30T06:16:48.453Z';

  // 用useMemo缓存转换后的Date对象，只有当apiDateStr变化时才重新生成
  const selectedDate = useMemo(() => {
    return new Date(apiDateStr);
  }, [apiDateStr]);

  return (
    <DatePicker selected={selectedDate} {...props} />
  );
};

解决方案2：用moment + useMemo缓存 #

如果你习惯用moment，同样要把moment实例缓存起来，保证每次渲染时引用不变：

import { useState, useMemo } from 'react';
import DatePicker from "react-datepicker";
import moment from 'moment';
import "react-datepicker/dist/react-datepicker.css";

const YourComponent = (props) => {
  const apiDateStr = '2019-12-30T06:16:48.453Z';

  // 缓存moment实例，避免每次渲染都创建新对象
  const selectedMoment = useMemo(() => {
    return moment(apiDateStr);
  }, [apiDateStr]);

  return (
    <DatePicker selected={selectedMoment} {...props} />
  );
};

额外提示 #

如果这个时间是组件初始化时的默认值，你也可以直接把转换后的值存在useState里，效果是一样的：

const [selectedDate, setSelectedDate] = useState(() => new Date(apiDateStr));

这样既解决了ISO时间格式不被支持的问题，也彻底干掉了无限更新循环的错误～

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