在 setState 上使用 JavaScript Date 对象时，React hook useState 不会更新 UI答案

【问题标题】：React hook useState not updating the UI when using JavaScript Date object on setState在 setState 上使用 JavaScript Date 对象时，React hook useState 不会更新 UI
【发布时间】：2020-10-23 10:34:23
【问题描述】：

我使用 React hook useState 创建了一个日期对象，如下所示：

  const [selectedDate, setselectedDate] = useState(new Date());

我有一个函数可以更新该对象的日期：

  const handleDayChange = (increment) => {
    let dateWillUpdate = selectedDate;
    date.setDate(selectedDate.getDate() + increment);
    setselectedDate(dateWillUpdate);
  };

对象已更新，但 UI 未更新。所以我尝试了另一种方法，即像这样分配日期对象：

let dateWillUpdate = {...selectedDate};

但这给了我一个空对象：

object:{}

我正在用这个函数渲染日期：

const renderDaySelector = () => {
    return (
      <View style={styles.selector}>
        <View style={[styles.fieldContainer, { flex: 1 }]}>
          <TouchableOpacity onPress={() => handleDayChange(1)}>
            <MaterialCommunityIcons
              name="chevron-up"
              color={Colors.primary}
              size={30}
            />
          </TouchableOpacity>
          <View style={[styles.field]}>
            <TextInput
              style={styles.textField}
              keyboardType="number-pad"
              value={selectedDate.getDate().toString()}
            />
          </View>
         ...
    );
  };

我在函数组件的主返回中调用：

return (
...

            <View style={styles.values}>{renderDaySelector()}</View>


...
)

如何在调用时更新 UI

handleDayChange()

功能？谢谢。

【问题讨论】：

标签： javascript reactjs react-native date react-hooks

【解决方案1】：

你不应该直接改变你的状态。在这种情况下，您需要创建一个新的 Date 对象才能正确更新您的状态。

您可以尝试使用new Date() 创建一个新对象：

let dateWillUpdate = new Date(selectedDate)

// or you use:
let dateWillUpdate = new Date(selectedDate.getTime())

【讨论】：