Datepicker 日期不会随 setState of date 改变

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);
}