React Native更新数组时显示ActivityIndicator失效问题求助

核心问题点 #

1. filteredData混淆了函数与状态：你定义的filteredData是异步函数，却直接传给FlatList的data属性，这会导致渲染错误，FlatList需要的是数组类型的状态变量，不是函数。
2. setState的异步特性误解：setCurrentMonth是异步操作，但它不返回Promise，所以await setCurrentMonth完全无效；且切换月份后没有触发数据筛选逻辑。
3. 筛选函数无需异步：数组filter是同步操作，给筛选函数加async/await完全多余，还会导致状态更新时机混乱。
4. 缺少状态变化监听：没有在currentMonth更新时自动触发数据筛选，导致切换月份后数据不更新，加载状态也无法正确触发。

修正后的完整代码示例 #

1. 状态定义（确保正确初始化）

import { useState, useEffect } from 'react';
import { ActivityIndicator, FlatList } from 'react-native';
import CalendarList from '你的CalendarList组件路径';

// 假设你的组件结构
const YourComponent = () => {
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth()); // 默认当前月份
  const [filteredData, setFilteredData] = useState([]); // 存储筛选后的数组
  const [isLoading, setIsLoading] = useState(false);
  const datas = []; // 你的原始数据数组

  // 监听currentMonth变化，自动触发筛选
  useEffect(() => {
    const filterData = () => {
      setIsLoading(true);
      // 同步执行筛选逻辑
      const temp = datas.filter((item) => {
        const dateParts = item.dayOffDate.split("-");
        const month = Number(dateParts[1]) - 1;
        return month === currentMonth;
      });
      setFilteredData(temp);
      // 如果是真实异步操作（比如接口请求），这里需要用await，同步逻辑直接设置false即可
      setIsLoading(false);
    };

    filterData();
  }, [currentMonth, datas]); // 依赖currentMonth和原始数据datas，变化时重新筛选

  // 修正onMonthChange逻辑
  const handleMonthChange = (month) => {
    const monthInt = parseInt(month.dateString.split("-")[1]);
    setCurrentMonth(monthInt - 1);
  };

  const renderListItem = ({ item }) => {
    // 你的列表项渲染逻辑
    return <Text>{item.你的文本字段}</Text>;
  };

  return (
    <>
      <CalendarList onMonthChange={handleMonthChange} />
      {isLoading ? (
        <ActivityIndicator size="small" />
      ) : (
        <FlatList
          data={filteredData}
          renderItem={renderListItem}
          keyExtractor={(item) => item.id} // 必须添加，避免React警告
        />
      )}
    </>
  );
};

export default YourComponent;

2. 特殊场景补充

如果你的datas是通过异步接口获取的，需要在获取数据时也处理加载状态：

// 比如在组件挂载时请求数据
useEffect(() => {
  const fetchData = async () => {
    setIsLoading(true);
    const res = await fetch('你的接口地址');
    const data = await res.json();
    setDatas(data); // 假设你有setDatas状态
    setIsLoading(false);
  };
  fetchData();
}, []);

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