使用react-native-calendars的Agenda组件触发React Native更新深度超限错误

兄弟，这个错误我之前踩过坑！本质就是React揪到了无限的状态更新循环，大概率和你给Agenda组件传的props或者你的状态更新逻辑有关，我给你梳理几个最容易排查的方向：

• 先检查你传给Agenda的props是不是每次都变
  比如你如果直接在render里写死items对象，或者每次渲染都生成新的回调函数，Agenda会以为props变了，触发重渲染，重渲染又生成新的props，直接无限循环。举个反例：

  // 这种写法绝对要避免！每次render都创建新的items和renderItem函数
  <Agenda
    items={{
      '2024-05-20': [{text: '我的日程'}]
    }}
    renderItem={(item) => <Text>{item.text}</Text>}
  />
  

  改成用useMemo缓存静态的props，用useCallback缓存回调函数：

  // 用useMemo缓存items，空依赖数组保证只初始化一次
  const agendaItems = useMemo(() => ({
    '2024-05-20': [{text: '我的日程'}]
  }), []);
  
  // 用useCallback缓存渲染函数，依赖数组加用到的外部变量
  const renderAgendaItem = useCallback((item) => {
    return <Text>{item.text}</Text>;
  }, []);
  
  <Agenda
    items={agendaItems}
    renderItem={renderAgendaItem}
  />
  

• 排查你的状态更新逻辑，别搞无限循环
  如果你在useEffect或者类组件的componentDidUpdate里监听了某个状态，然后回调里又直接更新这个状态，那肯定会无限触发更新。比如这种错误写法：

  // 踩坑现场：监听selectedDay，然后又更新selectedDay
  useEffect(() => {
    setSelectedDay(Agenda.getTodayDateString());
  }, [selectedDay]);
  

  要么调整依赖数组，要么加个条件判断，只有当状态不符合预期时才更新：

  // 修复后：加条件避免无意义更新
  useEffect(() => {
    const today = Agenda.getTodayDateString();
    if (selectedDay !== today) {
      setSelectedDay(today);
    }
  }, [selectedDay]);
  

• 检查Agenda的内置回调有没有踩坑
  比如onDayPress、onRefresh这些内置回调，如果你在里面直接更新了Agenda依赖的状态，也可能触发循环。举个例子：如果onDayPress里更新的状态刚好是Agenda的selectedDay，那要确保这个更新不会导致Agenda反复触发回调。

一般来说，先从缓存props和回调开始排查，这是这个组件最容易出问题的点，要是还没解决，再去检查你的状态更新逻辑，肯定能揪出循环的源头！

内容来源于stack exchange