在 setState 上使用 JavaScript Date 对象时，React hook

Question

我已经使用 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（）

功能？谢谢。

Answer 1

你不应该直接改变你的状态。在这种情况下，您需要创建一个新Date对象才能正确更新您的状态。您可以尝试使用new Date()创建一个新对象作为：let dateWillUpdate = new Date(selectedDate)// or you use:let dateWillUpdate = new Date(selectedDate.getTime())