Question

我有一个使用DatePickerIOS组件的场景。文档示例进入新的Date（）并使用state来保存和更新Date值。因此，如果我转到另一页并返回，时间将会改变，我需要重置此值。

文件用法：

static defaultProps = {
    date: new Date()
    timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
};

state = {
    date: this.props.date,
    timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
};

onDateChange(date) {
    this.setState({date: date});
};

render(){
    return(
            <View style={styles.wrap}>
                <View style={styles.datePickerIOS}>
                    <DatePickerIOS
                        date={this.state.date}
                        mode="time"
                        timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
                        onDateChange={this.onDateChange.bind(this)}
                        minuteInterval={10}
                    />
                </View>

我尝试使用道具并将此数据保存到本地存储中。

static defaultProps = {
    date: new Date()
    timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
};

state = {
    date: this.props.date,
    timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
};

componentWillMout() {
    this.props.updateDate(this.props.date)
}

onDateChange(date) {
    this.setState({date: date});
    this.props.updateDate(date)
};

render(){
    return(
            <View style={styles.wrap}>
                <View style={styles.datePickerIOS}>
                    <DatePickerIOS
                        date={this.props.alarmConfig.date}
                        mode="time"
                        timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
                        onDateChange={this.onDateChange.bind(this)}
                        minuteInterval={10}
                    />
                </View>

updateDate（date）是一个动作

export function updateDate(date){
return {
    type: "UPDATE_DATE",
    date: date,
    }
}

export function alarmConfig(state=initialState, action){
switch(action.type) {
    case types.UPDATE_DATE:
        return {
            ...state,
            date: action.date
        };

如果我这样做，alarmConfig.date下的值是一个字符串，所以我收到一个错误，因为DatePickerIOS Date prop需要一个Date类型。

如果我改变如下：

<DatePickerIOS
      date={this.state.date}
      mode="time"
      timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
      onDateChange={this.onDateChange.bind(this)}
      minuteInterval={10}
 />

alarmConfig.date下的值是Date，与state.date

相同

导致这种情况的原因是什么？以及如何更改代码以达到我的目标？

谢谢大家。

Answer 1

如果你在redux商店中存储日期（就像我假设你从上面的代码中做的那样），你应该确实将应用程序状态映射到你的组件的mapStateToProps道具

请参阅：http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components

您没有理由不在Redux商店中存储Date对象，因此您的错误alarmConfig.date is a string可能是由初始状态引起的。您的initialState变量是什么样的？
如果您仍需要将日期序列化为字符串，请查看momentjs.com。

React Native：DatePickerIOS - 如何在从其他页面返回后保留“Date”值

1 个答案: