Невозможно показать выбранную дату при начальном рендере

Question

Я использую RN 0.59.8 и NativeBase 2.10.0. Я использую datepicker . Я пытаюсь установить defaultDate на state (например, meetingDate).

Ожидаемое поведение

1. Если meetingDate из props имеет значение, defaultDate будет меняться в зависимости от значения props.

Текущее поведение

1. если я объявлю состояние meetingDate на constructor с new Date(20, 1, 2019), то defaultDate покажет, что я хочу

2. Но, если я установлю его null, даже в этом console (при рендеринге) выведите правильное значение (после meetingDate изменения состояния), defaultDate не изменится.

Вот пример кода:

/* eslint-disable no-console */
import React, { Component } from 'react';
import { DatePicker } from 'native-base';
import { Row, Col } from 'react-native-easy-grid';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      meetingDate: null,
      // eslint-disable-next-line react/no-unused-state
      data: {},
    };
  }

  static getDerivedStateFromProps = (props, state) => {
    if (props.data !== state.data) {
      const {
        meetingDate,
      } = props.data;

      return {
        meetingDate: meetingDate ? new Date(meetingDate.getFullYear(), meetingDate.getMonth(), meetingDate.getDate()) : null,
      };
    }
    return null;
  }

  onMeetingDate = (meetingDate) => {
    this.setState({ meetingDate });
  }

  render() {
    console.log('meetDate render: ', this.state.meetingDate);
    /**
     * If the meetingDate from props has value, this will print the date from props
     * if I declare the meetingDate state at constructor with new Date(20, 1, 2019), this will make the default date show what I want
     * But, if I set it null, even in this console print the right value, the default date wont change.
     */
    return (
      <React.Fragment>
        <Row>
          <Col>
            <DatePicker
              defaultDate={
                this.state.meetingDate
              }
              animationType="fade"
              androidMode="spinner"
              onDateChange={this.onMeetingDate}
            />
          </Col>
        </Row>
      </React.Fragment>
    );
  }
}

export default App;

Answer 1

Вам это тоже нужно, Ссылка

componentDidUpdate(prevProps, prevState) {
  if(prevProps.data!==this.props.data){
    const {
        meetingDate,
      } = this.props.data;

    this.setState({meetingDate});
  }
}