Question

正如标题所说，我在使用setState输入一些数据后试图获取回调。

这是我的代码：

constructor(props) {
    super(props);
    this.state = {
        swipeablePanelActive: true,
        markedDates: {},
        isStartDatePicked: false,
        isEndDatePicked: false,
        startDate: '',
    }
}
onDayPress = (day) => {
    if (this.state.isStartDatePicked == false) {
        let markedDates = {}
        markedDates[day.dateString] = { startingDay: true, color: '#00B0BF', textColor: '#FFFFFF' };
        this.setState({
            markedDates: markedDates,
            isStartDatePicked: true,
            isEndDatePicked: false,
            startDate: day.dateString,
        });
    } else {
        let markedDates = this.state.markedDates
        let startDate = moment(this.state.startDate);
        let endDate = moment(day.dateString);
        let range = endDate.diff(startDate, 'days')
        markedDates[day.dateString] = { endingDay: true, color: '#00B0BF', textColor: '#FFFFFF' };
        this.setState({
            markedDates: markedDates,
            isStartDatePicked: false,
            isEndDatePicked: true,
            startDate: ''
        }, this.checktest);
    }
}

checktest = () => {
    const { markedDates } = this.state;
    if (markedDates !== null) {
        return( markedDates);
    }
}

render() {
    const { markedDates } = this.state;
    return (
            <SwipeablePanel closeOnTouchOutside={true} openLarge={true} style={{}} fullWidth={true} isActive={this.state.swipeablePanelActive} onClose={() => this.closePanel()}>
                <View style={{paddingHorizontal:width/25}}>
                    <Text style={{fontFamily:'Hind-SemiBold', fontSize:width/15, paddingVertical:width/20}}>Seleziona l'inizio e la fine del corso.</Text>
                    <Calendar
                    minDate={Date()}
                    monthFormat={"MMMM yyyy"}
                    style={styles.calendarbox}
                    renderArrow={(direction) => direction === "left" ? <Entypo name="chevron-left" size={20}/> : <Entypo name="chevron-right" size={20}/>}
                    hideExtraDays={true}
                    markedDates={markedDates}
                    markingType="period"
                    onDayPress={this.onDayPress}
                    theme={{
                        monthTextColor: '#000',
                        textMonthFontFamily:'Hind-Regular',
                        dayTextColor:'#000',
                        textDisabledColor:'#a2a2a3',
                        textSectionTitleColor:'#a2a2a3',
                        selectedDayTextColor: '#ffffff',
                        textDisabledColor: '#d9e1e8',
                    }}
                    />
                    <View style={{flex:1, paddingHorizontal:width/9, paddingVertical:width/15}}>
                        <TouchableOpacity disabled={this.state.touchstate} onPress={()=> console.log("hello")}>
                            <View style={{height:width/7, backgroundColor:this.state.textcolor, justifyContent:'center'}}>
                                <Text style={{color:'#fff', alignSelf:'center', fontFamily:'Hind-SemiBold', fontSize:width/20}}>APPLICA</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </SwipeablePanel>
   );
}

简单地说，我试图用onDayPress调用一个函数，该函数将一些信息插入markedDates状态，然后将这些信息检索到日历中的marketDates中。

问题是我无法始终获取markedDates = {markedDates}上的信息，但是当我使用console.log（）检查是否一切都很好时，它应该可以正常工作。

Answer 1

markedDates值的引用仍然相同，因为您只是将一个值添加到其当前值，而不会更改其引用。

要使React知道值已更改，组件prop的值应在内存中有一个新引用。

因此，当您需要基于先前状态的新状态时，应在this.setState中的函数中使用先前状态作为参数，例如ReactJS docs表示...

onDayPress = (day) => {
    if (this.state.isStartDatePicked == false) {
        this.setState(prevState => ({
            markedDates: {
              [day.dateString]: {
                startingDay: true, 
                color: '#00B0BF', 
                textColor: '#FFFFFF'
              }
            },
            isStartDatePicked: true,
            isEndDatePicked: false,
            startDate: day.dateString,
        }));
    } else {
        let startDate = moment(this.state.startDate);
        let endDate = moment(day.dateString);
        let range = endDate.diff(startDate, 'days')

        this.setState(prevState => ({
            markedDates: {
              ...prevState.markedDates,
              [day.dateString]: { 
                endingDay: true, 
                color: '#00B0BF', 
                textColor: '#FFFFFF' 
              },
            },
            isStartDatePicked: false,
            isEndDatePicked: true,
            startDate: ''
        }), this.checktest);
    }
}

Answer 2

ng build --prod

等待setState完成，然后返回数据

2 个答案: