React Native Calendars日程表无法显示事件问题求助

问题分析与修复步骤： #

1. 禁止直接修改State对象
   React的useState通过引用变化触发重渲染，原代码直接修改items对象的属性，React无法感知到变化，必须创建新的对象副本进行更新。

2. 修正数组判断逻辑
   _.filter返回的始终是数组，空数组在条件判断中为真，导致无事件时的逻辑永远不会执行。应该通过daysEvent.length判断是否有匹配的事件。

3. 修复JSX语法错误
   renderItem中存在重复的<TouchableOpacity>标签，且条件渲染结构不完整，导致组件渲染失败，显示空白页面。

4. 监听eventsArray的更新
   当Redux中的eventsArray数据变化时，需要重新加载日程数据，否则新数据不会同步到Agenda组件。

修复后的完整代码： #

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Agenda } from 'react-native-calendars';
import { Card } from 'react-native-paper';
import moment from 'moment';
import _ from 'lodash';

// 确保timeToString返回与event.hearingdate一致的'YYYY-MM-DD'格式
const timeToString = (time) => {
  const date = new Date(time);
  return moment(date).format('YYYY-MM-DD');
};

const Calendar = ({ eventsArray }) => {
  const [items, setItems] = useState({});
  const currentDate = moment().format('YYYY-MM-DD');

  const loadItems = (day) => {
    // 创建items副本，避免直接修改原state
    const newItems = { ...items };

    for (let i = -15; i < 85; i++) {
      const time = day.timestamp + i * 24 * 60 * 60 * 1000;
      const strTime = timeToString(time);

      if (!newItems[strTime]) {
        newItems[strTime] = [];
        const daysEvent = _.filter(
          eventsArray,
          event => event.hearingdate === strTime
        );

        if (daysEvent.length > 0) {
          daysEvent.forEach(event => {
            newItems[strTime].push({
              name: event.clientname,
              caseNumber: event.casenumber,
              court: event.courtname,
              height: Math.max(10, Math.floor(Math.random() * 150)),
              day: strTime,
            });
          });
        }
      }
    }

    setItems(newItems);
  };

  const renderItem = (item, firstItemInDay) => {
    return (
      <>
        {firstItemInDay && (
          <View style={styles.firstItemContainer}>
            <Text>
              {moment(item.day, 'YYYY-MM-DD').format('DD')}{' '}
              {moment(item.day, 'YYYY-MM-DD').format('MMM').substring(0, 3)}
            </Text>
          </View>
        )}
        {item.name && (
          <TouchableOpacity style={styles.item}>
            <Card>
              <Card.Content>
                <View>
                  <Text>{item.name}</Text>
                </View>
                <View style={{ marginTop: 8 }}>
                  <Text>{item.caseNumber}</Text>
                </View>
                <View style={{ marginTop: 3 }}>
                  <Text>{item.court}</Text>
                </View>
              </Card.Content>
            </Card>
          </TouchableOpacity>
        )}
      </>
    );
  };

  const renderEmptyDate = () => {
    return (
      <View style={styles.emptyDate}>
        <Text>今日无日程</Text>
      </View>
    );
  };

  // 监听eventsArray变化，重新加载数据
  useEffect(() => {
    loadItems({ timestamp: moment(currentDate).valueOf() });
  }, [eventsArray, currentDate]);

  return (
    <View style={{ flex: 1 }}>
      <Agenda
        items={items}
        loadItemsForMonth={loadItems}
        selected={currentDate}
        minDate={'2022-01-01'}
        maxDate={'2025-01-01'}
        renderEmptyDate={renderEmptyDate}
        refreshControl={null}
        showClosingKnob={true}
        refreshing={false}
        renderItem={renderItem}
        renderDay={() => <View />}
      />
    </View>
  );
};

// 示例样式，可根据需求调整
const styles = {
  firstItemContainer: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: '#f0f0f0',
  },
  item: {
    marginHorizontal: 16,
    marginVertical: 8,
  },
  emptyDate: {
    paddingVertical: 20,
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
};

export default Calendar;

内容的提问来源于stack exchange，提问作者ananthapadmanabhan g