警告：失败的道具类型：道具“日期”在“日历提供者”中被标记为必需，但其值为“未定义”

Question

我是 react-native 应用程序的新手，我试图获取议程选定的日期数据，但我无法接受它，当我调试它时，它正在写入道具日期已标记但未定义。 而且我无法获取选定的日期数据。 这是我的议程屏幕代码：

export default class AgendaScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markedDates: this.getMarkedDates(),
      isVisibleItems: false,
      onDayPress: { dateString: moment(new Date()).format("YYYY-MM-DD") }
    };
  }
  buttonPressed() {
    Alert.alert("show more");
  }

  getMarkedDates = () => {
    const { items } = this.props;
    const marked = {};
    items.calendar
      ? items.calendar.forEach(item => {
        // only mark dates with data
        if (
          item.data &&
          item.data[1].limit == 0 &&
          item.data[0].limit == 0 &&
          !_.isEmpty(item.data[0])
        ) {
          marked[item.title] = { marked: true };
        }
      })
      : null;
    return marked;
  };

  componentDidMount() {
    this.setState({ isVisibleItems: true });
  }
  render() {
    const { items } = this.props;
    const { isVisibleItems, onDayPress } = this.state;
    return (
      <View style={{ marginTop: 15, zIndex: 0 }}>
        <CalendarProvider >
          <ExpandableCalendar
            firstDay={1}
            markedDates={this.getMarkedDates()}
            theme={this.getTheme()}
            minDate={new Date()}
            onDayPress={day => {
              this.setState({ isVisibleItems: true, onDayPress: day });
            }}
          />
        </CalendarProvider>
        {isVisibleItems ? this.renderItem(onDayPress) : null}
      </View>
    );
  }
}

看起来我的 getMarkedDates 函数不起作用 idk 为什么

Answer 1

看起来在你的 CalendarProvider 组件中你已经根据需要设置了日期，现在你应该像<CalendarProvider date = {date} >一样提供它，还尝试在 componentDidMount 而不是构造函数中调用 getMarkedDates 函数。