React Native函数组件中Array.map未渲染对应列表项问题求助

架构老林

2026-10-6

问题根因

你声明的mountDates是普通JavaScript变量，不是React状态。React不会监听普通变量的变化，也不会因为普通变量值更新触发组件重渲染。
你的useEffect执行时机是在组件首次渲染完成之后，首次渲染时mountDates还是空数组，后续你往数组中push日期数据时，没有触发组件重新渲染，所以页面一直显示为空。
另外你useEffect的依赖数组为空，后续如果startDate、endDate参数发生变化，也不会重新生成对应的日期列表。

修正方案

把mountDates改成React状态，修改状态触发重渲染，同时补全useEffect的依赖项：

import React, {useEffect, useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {globalStyles} from '../../styles/global';
import AgendaItem from './agendaItem';

export default function Agenda({onDayChange, startDate, endDate}) {
  // 声明为React状态
  const [mountDates, setMountDates] = useState([]);

  useEffect(() => {
    const getDates = (startDate, endDate) => {
      const dates = [];
      // 复制传入的startDate避免修改父组件原始值
      let currentDate = new Date(startDate);
      while (currentDate.getTime() <= endDate.getTime()) {
        dates.push(new Date(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
      }
      // 一次性更新状态触发重渲染
      setMountDates(dates);
    };
    getDates(startDate, endDate);
  // 补全依赖，日期参数变化时自动重新生成列表
  }, [startDate, endDate]);

  return (
    <View style={styles.container}>
      {mountDates.map((date, i) => {
        return <AgendaItem key={i.toString()} date={date} />;
      })}
    </View>
  );
}