this.setState() 在本機反應中無法正常工作

Question

我完全理解 this.setstate() 函數如何在 react 中工作，但從早上開始我就在為一個錯誤而苦苦掙扎，我在我的活動中使用 wix react native 日歷。 onDayPress 我正在調用一個函數，該函數接收日期作為參數並使用 this.setState({startDate: day}) 更新我的狀態屬性“startDate”，但狀態值永遠不會改變並保持 ''（我的調試控制台中的空字符串）

以下是我的完整班級代碼

import React, {Component} from 'react';
import styled from 'styled-components';
import {SafeAreaView} from 'react-native';
let variables = require('../globals/theme');
import FlatBtn from '../components/flatbtn';
import {CalendarList} from 'react-native-calendars';

class DateSelector extends Component {
  state = {
    startDate: '',
    endDate: '',
  };

  dayPressed = day => {
    console.log('Selected Day = ', day);
    this.setState({startDate: day}, () => {
      console.log(this.state.startDate); // This prints empty string :(
    });
  };

  createDateArray = (startDate, endDate) => {
    console.log('My Days', typeof startDate);
    var DaysArray = [startDate.dateString];

    if (endDate === '') {
      this.SetupCalendar(DaysArray);
      return;
    }
    for (let i = 1; i < startDate.day - endDate.day; i++) {
      DaysArray.push(
        `${startDate.year}+${startDate.month}-${startDate.day + 1}`,
      );
    }
    this.SetupCalendar(DaysArray);
  };

  SetupCalendar = DaysArray => {
    console.log(DaysArray);
  };

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <MainScreen>
          <TopBlock>
            <ClearButton>
              <FlatBtn
                label="Clear"
                color={variables.blackColor}
                fontstyle="Avenir-Heavy"
              />
            </ClearButton>
            <CheckIn>
              {this.state.startDate ? (
                <CheckinTime>{this.state.startDate.dateString}</CheckinTime>
              ) : (
                <CheckinTime>Check In</CheckinTime>
              )}
            </CheckIn>
            <CheckOut>
              {this.state.endDate ? (
                <CheckOutTime> {this.state.endDate.dateString}</CheckOutTime>
              ) : (
                <CheckOutTime> Check Out</CheckOutTime>
              )}
            </CheckOut>
          </TopBlock>

          <CalendarList
            // Callback which gets executed when visible months change in scroll view. Default = undefined
            onVisibleMonthsChange={months => {
              console.log('now these months are visible', months);
            }}
            // Max amount of months allowed to scroll to the past. Default = 50
            pastScrollRange={10}
            // Max amount of months allowed to scroll to the future. Default = 50
            futureScrollRange={10}
            // Enable or disable scrolling of calendar list
            scrollEnabled={true}
            // Enable or disable vertical scroll indicator. Default = false
            showScrollIndicator={false}
            // Collection of dates that have to be colored in a special way. Default = {}
            // markedDates={{
            //   '2019-12-10': {
            //     startingDay: true,
            //     color: variables.accentColor,
            //     textColor: 'white',
            //   },
            //   '2019-12-11': {
            //     selected: true,
            //     color: variables.accentColor,
            //     textColor: 'white',
            //   },
            //   '2019-12-12': {
            //     selected: true,
            //     endingDay: true,
            //     color: variables.accentColor,
            //     textColor: 'white',
            //   },
            // }}
            // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
            markingType={'period'}
            onDayPress={day => {
              this.dayPressed(day);
            }}
          />
        </MainScreen>
      </SafeAreaView>
    );
  }
}

const ClearButton = styled.View`
  display: flex;
  height: 20px;
  flex-direction: row;
  padding-left: 25px;
`;

const CheckinTime = styled.Text`
  font-family: 'Avenir-Light';
  font-size: 18px;
  color: ${variables.blackColor};
`;
const CheckOutTime = styled.Text`
  font-family: 'Avenir-Light';
  font-size: 18px;
  color: ${variables.blackColor};
`;

const MainScreen = styled.View`
  display: flex;
  flex: 1;
`;
const Text = styled.Text``;

const CheckIn = styled.View`
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
`;
const CheckOut = styled.View`
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
`;

const TopBlock = styled.View`
  display: flex;
  width: 100%;
  height: 15%;
  flex-direction: row;
  border-bottom-width: 1px;
  border-color: ${variables.borderColor};
`;

export default DateSelector;

我發現的一件事是，當我再次選擇日期時，狀態變量顯示舊狀態而不是新狀態。

Answer 1

我認為您可以在代碼中使用async方法：

async fun()=>{

   ...
   await this.setState(..)
   ...
   }

也許這對你有幫助:)