react-native-calendars中Agenda子项点击状态不更新问题求助

问题根源在于组件每次重渲染时，items对象和renderItem函数都会被重新创建，导致Agenda的内部渲染优化机制失效，第二项的状态更新无法触发即时重渲染。

修复方案 #

通过useMemo和useCallback保持数据与渲染函数的引用稳定，让Agenda能正确响应状态变化：

import React, { useState, useMemo, useCallback } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Agenda } from 'react-native-calendars';

const Calendar: React.FC = () => {
  const [expandedItem, setExpandedItem] = useState<string | null>(null);

  const currentDate = new Date().toISOString().split('T')[0];

  // 用useMemo缓存items，避免每次重渲染创建新对象
  const items = useMemo(() => ({
    [currentDate]: [
      { id: '1', title: 'Item 1', description: 'Dummy text for Item 1.' },
      { id: '2', title: 'Item 2', description: 'Dummy text for Item 2.' },
    ],
  }), [currentDate]);

  // 用useCallback包裹renderItem，保证函数引用稳定
  const renderItem = useCallback((item: { id: string; title: string; description: string }) => {
    const isExpanded = expandedItem === item.id;

    return (
      <View style={styles.itemContainer}>
        <TouchableOpacity onPress={() => setExpandedItem(isExpanded ? null : item.id)}>
          <Text style={styles.itemTitle}>{item.title}</Text>
        </TouchableOpacity>
        {isExpanded && <Text style={styles.itemDescription}>{item.description}</Text>}
      </View>
    );
  }, [expandedItem]);

  return (
    <View style={styles.container}>
      <Agenda
        items={items}
        renderItem={renderItem}
        selected={currentDate}
        theme={{
          agendaDayTextColor: 'blue',
          agendaDayNumColor: 'blue',
          agendaTodayColor: 'blue',
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  itemContainer: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  itemTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  itemDescription: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
});

export default Calendar;

原理说明 #

• useMemo缓存items后，只有当currentDate变化时才会重新生成对象，避免了无意义的引用变化，让Agenda能正确识别数据是否真的更新。
• useCallback包裹renderItem后，仅在expandedItem变化时更新函数引用，确保每个列表项能即时响应状态变化，无需切换日期强制刷新。

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