使用react-native-calendars的Agenda组件时如何解决“Maximum update depth exceeded”报错？

兄弟，我太懂你跟着教程敲代码结果原地报错的憋屈了！这个“最大更新深度超过”的问题，我之前用Agenda组件的时候也踩过坑，大概率是组件无限重渲染搞的鬼，给你唠唠最常见的原因和解决办法：

• 别在渲染阶段直接更新状态
  要是你在Agenda的props里直接写了setItems这类状态更新代码，或者在render函数里随便调用状态更新，那每次组件渲染都会触发状态改变，然后又重新渲染，无限循环直接就报错了。
  解决办法很简单：把状态更新的逻辑只绑定到特定事件上，比如点击日期、数据加载完成的时候，别让它每次渲染都跑一遍。

• 缓存你的props，别每次渲染都生成新引用
  很多人踩坑是因为给Agenda传的items、renderItem这些props，每次组件渲染都会生成新的对象或者函数。Agenda组件会以为props变了，就重新渲染，反复几次就触发深度超限了。
  你可以这么改：

  • 用useMemo缓存items数据，确保只有数据真的变了才更新引用：

    const memoizedItems = useMemo(() => yourItemData, [yourItemData]);
    

  • 用useCallback缓存回调函数，比如renderItem、onDayChange：

    const renderAgendaItem = useCallback((item) => {
      return <View style={{padding: 10}}><Text>{item.title}</Text></View>;
    }, []);
    

  这样每次渲染时这些props的引用不会乱变，Agenda就不会瞎重渲染了。

• 检查useEffect的依赖，别搞出无限循环
  如果你是用useEffect加载Agenda的数据，一定要盯紧依赖数组。要是你在useEffect里更新了某个状态，又把这个状态放进了依赖数组，那每次更新状态都会触发useEffect，又更新状态，直接无限循环。
  解决办法：把依赖数组里的冗余变量删掉，只留真正需要触发更新的变量；或者用useRef来存一些不需要触发重渲染的值。

给你贴个简单的正确示例，你可以对照着改自己的代码：

import { useState, useMemo, useCallback } from 'react';
import { Agenda } from 'react-native-calendars';

const MyAgendaComponent = () => {
  const [agendaItems, setAgendaItems] = useState({});

  // 缓存items数据
  const memoizedItems = useMemo(() => agendaItems, [agendaItems]);

  // 缓存渲染每个条目的函数
  const renderItem = useCallback((item) => {
    return (
      <View style={{margin: 5, padding: 10, backgroundColor: '#fff'}}>
        <Text>{item.content}</Text>
      </View>
    );
  }, []);

  // 缓存日期切换的回调
  const handleDayChange = useCallback((selectedDay) => {
    // 这里处理日期切换后的逻辑，比如加载对应日期的数据
    console.log('当前选中日期：', selectedDay.dateString);
  }, []);

  return (
    <Agenda
      items={memoizedItems}
      renderItem={renderItem}
      onDayChange={handleDayChange}
    />
  );
};

export default MyAgendaComponent;

先从这几个点排查，一般都能把这个报错搞定！

内容来源于stack exchange