Datepicker日期不会随着日期的setState而改变。

Question

我正在做一个React Native应用，在那里我使用了 native base datepicker。当选择不同的日期时，会从api中获取新的数据并显示出来。这很好用。但也有一个刷新按钮。如果按下这个按钮，最初的api数据应该会被显示出来。现在假设最初api获取的是8月21日的数据。然后，我在数据选择器中把日期改为8月22日，新的数据就会显示出来。现在 onPress 刷新时，它完美地显示了8月21日的初始数据，但在数据选择器中，日期仍然显示为8月22日。我需要在刷新时显示初始日期。

这是我现在的代码。

class Third extends Component {
  constructor(props) {
    super(props);
    this.state = {
      first: '',
      second: '',
      third: '',
      date: '',
      draw: ''
    }
    this.setDate = this.setDate.bind(this);
  }

  async componentDidMount() {
    var today = new Date()
    var time = today.getHours()
    var weekDay = today.getDay()
   
    await fetch('https://api', {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((response) => {
          this.setState({ tableData1: response.magnum })
          this.setState({ tableData2: response.special })
          this.setState({ tableData3: response.consolation })
          this.setState({ date: response.date })
          this.setState({ draw: response.draw })
      })
    }
    
  refreshData = async()=>{
    this.setState({pending: true})
    var today = new Date()
    var time = today.getHours()
    var weekDay = today.getDay()
   
    await fetch('https://api', {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((response) => {
          this.setState({ tableData1: response.magnum })
          this.setState({ tableData2: response.special })
          this.setState({ tableData3: response.consolation })
          this.setState({ date: response.date })
          this.setState({ draw: response.draw })
      })
  }

  async setDate(newDate) {
    let day = newDate.getDate()
    let todate = newDate.getDate()
    let tomonth = newDate.getMonth()
    let toyear = newDate.getFullYear()
    let todday = toyear +'-'+ tomonth + '-' + todate
    let month = newDate.getMonth() + 1
    let year = newDate.getFullYear()
    day = String(day).length > 1 ? day : '0' + day
    month = String(month).length > 1 ? month : '0' + month
    let anday = year+'-'+month+'-'+day
    if (todday === anday){
      await fetch('https://api', {
        method: 'GET',
      })
        .then((response) => response.json())
        .then((response) => {
            this.setState({ tableData1: response.magnum })
            this.setState({ tableData2: response.special })
            this.setState({ tableData3: response.consolation })
            this.setState({ date: response.date })
            this.setState({ draw: response.draw })
        })
    }else{
    let fullDate = 'https://api/'+year+'-'+month+'-'+day
    console.log('date', fullDate)
    await fetch(fullDate, {
      method: 'GET',
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
      .then((response) => {
        if (response.status === 200) {
        console.log('response:',response)
        return response.json()
        }
      })
      .then((response) => {
        if (response === null || response === undefined ) {
          console.log('new:', response)
          this.setState({ tableData1: response.magnum })
          this.setState({ tableData2: response.special })
          this.setState({ tableData3: response.consolation })
          this.setState({ date: response.date })
          this.setState({ draw: response.draw })
      })
    }
  }

  render() {
    return (
          <View>
                  <DatePicker
                    defaultDate={this.state.date}
                    minimumDate={new Date(2018, 1, 1)}
                    maximumDate={new Date(2019, 12, 31)}
                    locale={"en"}
                    timeZoneOffsetInMinutes={undefined}
                    modalTransparent={false}
                    animationType={"fade"}
                    androidMode={"default"}
                    placeHolderText={this.state.date}
                    textStyle={{ color: "#000", fontSize: 18, paddingRight: 5 }}
                    placeHolderTextStyle={{ color: "#000", fontSize: 18, paddingRight: 5 }}
                    onDateChange={this.setDate}
                    disabled={false}
                  />
                <Icon name='refresh' onPress={()=>this.refreshData()} />

              </View>

Answer 1

我遇到了同样的问题，无法在datepicker中更新日期，我所做的是在datepicker中添加一个ref属性，就像这样。

<DatePicker
    defaultDate={this.state.date.toDate()}
    locale={"en"}
    timeZoneOffsetInMinutes={undefined}
    modalTransparent={false}
    animationType={"fade"}
    androidMode={"default"}
    placeHolderText={this.state.date.format('dddd L')}
    placeHolderTextStyle={{ padding: 0 }}
    textStyle={{ padding: 0 }}
    onDateChange={this.setDate}
    formatChosenDate={() => { return this.state.date.format('dddd L'); }}
    ref={c => this._datePicker = (c) } {# this line #} />

在拾音器内设置日期

if (this._datePicker) {
    this._datePicker.setDate(date);
}