使用 moment 时，React Native 不会在状态更新后立即呈现值

Question

我试图让按钮更新当前选择的月份，但是，我只看到重新加载屏幕时呈现的更改（即在 IDE 中点击保存）。我不确定这是否与我使用 moment.js 包有关。

import moment from 'moment';
import React, {useEffect, useState} from 'react';
[...]

export default function MySchedule() {
  const [selectedDate, setSelectedDate] = useState(moment());

  return (
    <View style={styles.container}>
      [...]
      <View style={styles.calendar}>
        <View style={styles.calendarHeader}>
          <Text style={styles.calendarHeaderText}>
            {selectedDate.format('MMMM')} {selectedDate.year()}
          </Text>
          <View style={styles.calendarButtonContainer}>
            <TouchableOpacity
              onPress={() => {
                const newMonth = selectedDate.subtract(1, 'month');
                setSelectedDate(newMonth);
              }}>
              <ChevronLeft color="white" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                const newMonth = selectedDate.add(1, 'month');
                setSelectedDate(newMonth);
              }}
              style={styles.chevronRight}>
              <ChevronRight />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  [...]
});

Answer 1

虽然这不是最理想的解决方案，但我能够通过在所选日期更改时增加一个虚拟挂钩来解决此错误：

  const [dummyHook, setDummyHook] = useState(0);
  [...]
   <View style={styles.calendarButtonContainer}>
        <TouchableOpacity
          onPress={() => {
            setSelectedDate(oldMonth => oldMonth.subtract(1, 'month'));
            console.log('newMonth', selectedDate);
            setDummyHook(oldDummyHook => oldDummyHook + 1);
          }}>
          <ChevronLeft color="white" />
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            setSelectedDate(oldMonth => oldMonth.add(1, 'month'));
            console.log('newMonth', selectedDate);
            setDummyHook(oldDummyHook => oldDummyHook + 1);
          }}
          style={styles.chevronRight}>
          <ChevronRight />
        </TouchableOpacity>
      </View>

使用 moment 时，React Native 不会在状态更新后立即呈现值

React Native not rendering value immediately after state update when using moment

momentjs

react-native