React Native(TypeScript)：父组件API未完成时子组件渲染致数据未定义问题

1. 修正函数调用笔误 #

你的useEffect里定义的函数是UpdateDetails，但调用的是UpdateStockDetails，这会直接导致API逻辑未执行，isLoading保持初始值（大概率为false），组件直接渲染子组件并拿到undefined数据。把调用语句改成UpdateDetails()。

2. 初始化isLoading为true #

确保组件启动时处于加载状态，避免初始渲染就渲染子组件：

const [isLoading, setIsLoading] = useState<boolean>(true);

3. 并行调用API提升性能 #

四个API调用相互独立，用Promise.all并行执行比串行await更高效：

useEffect(() => {
  async function UpdateDetails() {
    try {
      // 并行获取所有API数据
      const [intradayJSON, dailyJSON, weeklyJSON, monthlyJSON] = await Promise.all([
        getIntradayData(newSymbol),
        getDailyData(newSymbol),
        getWeeklyData(newSymbol),
        getMonthlyData(newSymbol)
      ]);

      // 解析并设置状态
      setIntraday(parseIntradayData(intradayJSON));          
      setDaily(parseDailyData(dailyJSON));
      setWeekly(parseWeeklyData(weeklyJSON));
      setMonthly(parseMonthlyData(monthlyJSON));
    } catch (error) {
      // 处理API调用错误，比如打印日志或提示用户
      console.error("API调用失败:", error);
    } finally {
      // 无论成功失败都结束加载状态
      setIsLoading(false);
    }
  }
  UpdateDetails();
}, [newSymbol]); // 依赖newSymbol，当它变化时重新触发API调用

4. 增强数据校验，避免强制断言 #

不要用!强制断言数据存在，在渲染子组件前额外检查数据有效性，防止API返回错误数据的情况：

if(isLoading){
  return <ActivityIndicator size='large' />
}

// 检查所有数据是否存在，不存在则显示错误占位
if (!intraday || !daily || !weekly || !monthly) {
  return <Text>数据加载失败，请重试</Text>;
}

// 数据全部有效时再渲染子组件
return (
  <ScrollView style={{ backgroundColor: black}}>
    <View style={{ flex: 1, justifyContent: 'space-between', padding: 10 }}>
      <View>
        <Graph 
          symbol={newSymbol} 
          intraday={intraday}
          daily={daily}
          weekly={weekly}
          monthly={monthly}
        />
      </View>
      ...
    </View>
  </ScrollView>
);

5. 子组件添加容错处理（可选） #

在Graph组件中给props设置可选类型或默认值，即使父组件意外传递undefined，也能避免崩溃：

interface GraphProps {
  symbol: string;
  intraday?: IntradayInterface;
  daily?: DailyInterface;
  weekly?: WeeklyInterface;
  monthly?: MonthlyInterface;
}

const Graph = ({ symbol, intraday = {}, daily = {}, weekly = {}, monthly = {} }: GraphProps) => {
  // 组件逻辑，使用默认空对象避免undefined报错
};

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