React Native中map映射的接口数据无法显示且控制台无限循环打印

问题根因及解决方法 #

1. 页面无内容渲染的原因 #

你的map遍历回调使用了花括号包裹函数体，但没有显式return需要渲染的JSX元素，仅执行了console.log语句，相当于map返回了全是undefined的数组，自然没有内容渲染到页面。

2. 控制台无限循环打印的原因 #

有两个触发点：

• 初始状态shift为undefined，渲染时直接访问shift.time_breakup会抛出运行时异常，触发组件重渲染，重复走请求、更新状态、渲染报错的流程
• useCallback的依赖数组缺失了外部变量ID，不符合hooks依赖规则，结合状态更新逻辑会触发重复的接口请求和组件重渲染

修正方案 #

第一步：修复useCallback依赖

把ID加入useCallback的依赖数组，避免异常的重复请求：

const getShiftDetails = useCallback(() => {
    ApiFunctions.get('shift/' + ID)
        .then(async resp => {
            if (resp) {
                setShift(resp.data);
            } else {
                Alert.alert('Error', resp);
            }
        })
        .catch((err: any) => {
            console.log(err);
        });
}, [ID]); // 补充ID作为依赖

第二步：修复渲染逻辑

增加可选链判断避免空值报错，补充map回调的返回逻辑，为遍历元素添加key属性：

<View>
    {/* 可选链判断，只有shift、time_breakup、break_timings都存在时才执行遍历 */}
    {shift?.time_breakup?.break_timings?.map((item: any, index: any) => {
        console.log(item.break_in_time)
        // 显式return需要渲染的JSX
        return (
            <View key={index}>
                <Text>{item.break_in_time}</Text>
                <Text>{item.break_out_time}</Text>
            </View>
        );
    })}
</View>

你也可以去掉花括号用隐式返回简化写法：

<View>
    {shift?.time_breakup?.break_timings?.map((item: any, index: any) => (
        <View key={index}>
            <Text>{item.break_in_time}</Text>
            <Text>{item.break_out_time}</Text>
        </View>
    ))}
</View>

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