React Native使用Moment.js实现点击切换日期时日期不更新问题求解

当前代码完全没有接入React的响应式状态更新机制，所有日期计算逻辑都没有和页面渲染的数据源打通，因此点击操作不会触发任何UI变化。 #

具体问题拆解 #

• 两个箭头按钮的onPress回调仅在点击时临时计算了格式化后的日期字符串，没有将计算结果存储为可被组件读取的响应式值，计算完的结果没有任何传递路径，自然不会影响页面展示。
• 展示日期的Text组件渲染时，直接硬编码调用moment().format('DD MMM YYYY')，这个逻辑每次组件重渲染时都会直接取当天日期，就算你点击按钮算出了昨天/明天的日期，Text组件的渲染逻辑完全感知不到这些计算结果，因此永远显示当天日期。
• 现有回调的计算基准存在缺陷：所有日期加减都是以“当下真实的今天”为固定基准，就算后续接入了状态存储，多次点击后退/前进按钮，也只会固定算出昨天/明天的日期，没法连续切换到前天、大后天这类更早/更晚的日期。

修正实现方案 #

1. 引入React状态Hook，用useState存储当前需要展示的日期，初始化值为当天日期：

   // 组件内部定义响应式状态
   const [currentDisplayDate, setCurrentDisplayDate] = useState(moment())
   

2. 修改Text组件的渲染值，改为读取状态中存储的日期，而非每次渲染时临时取当天日期：

   <Text
     style={{
       ...commonStyles.fontSize15,
       fontFamily: fontFamily.mediumText,
       color: colors.themeColor,
     }}>
     {currentDisplayDate.format('DD MMM YYYY')}
   </Text>
   

3. 修改两个箭头按钮的onPress逻辑，点击时基于上一次存储的日期做加减计算，再更新到状态中触发UI重渲染：

   {/* 后退箭头：往前（昨日方向）切一天 */}
   <PressImage
     source={imagePath.back}
     onPress={() => setCurrentDisplayDate(prevDate => prevDate.subtract(1, 'day'))}
   />
   
   {/* 前进箭头：往后（明日方向）切一天 */}
   <PressImage
     source={imagePath.rightArrowBtn}
     onPress={() => setCurrentDisplayDate(prevDate => prevDate.add(1, 'day'))}
   />
   

注意：日期加减必须以状态更新函数返回的上一次存储日期作为计算基准，不能每次都拿全局当前的moment实例做加减，否则会丢失连续切换的能力。

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