在 React Native 中，映射的数据未显示在屏幕上答案

【问题标题】：Mapped data is not shown on screen in React Native在 React Native 中，映射的数据未显示在屏幕上
【发布时间】：2021-12-29 02:11:47
【问题描述】：

我收到来自 API 的响应：

{
    "data": {
        // other stuff
        "time_breakup": {
            "break_timings": [
                {
                    "break_in_time": "2021-11-18T05:32:35.747Z",
                    "break_out_time": "2021-11-18T05:32:47.871Z"
                },
                {
                    "break_in_time": "2021-11-18T06:21:35.740Z",
                    "break_out_time": "2021-11-18T06:21:39.909Z"
                }
            ],
        },
        
    },
    "success": true
}

我正在使用以下函数来获取此响应：

const [shift, setShift]: any = useState();

const getShiftDetails = useCallback(() => {
    ApiFunctions.get('shift/' + ID)
        .then(async resp => {
            if (resp) {
                setShift(resp.data); // saving the response in state
                // some work

            } else {
                Alert.alert('Error', resp);
            }
        })
        .catch((err: any) => {
            console.log(err);
        });
}, []);

useEffect(() => {
    getShiftDetails();
}, [getShiftDetails, ID]);

因此，我已将响应保存为状态 shift。现在我想映射这个状态以在屏幕上显示时间：

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

但是，我在屏幕上看不到<Text>{item.break_in_time}</Text>；而且，在控制台中，我得到了一个无限循环的时间：

console.log：

2021-11-18T05:32:35.747Z
2021-11-18T06:21:35.740Z
2021-11-18T05:32:35.747Z
2021-11-18T06:21:35.740Z
2021-11-18T05:32:35.747Z
2021-11-18T06:21:35.740Z
2021-11-18T05:32:35.747Z
...

我不知道我做错了什么。

【问题讨论】：

标签： javascript typescript react-native mapping

【解决方案1】：

尝试在getShiftDetails useCallback 依赖数组中添加ID。

const getShiftDetails = useCallback(() => {...}, [ID])我相信这是导致无限循环的原因

将console.log放在返回地图函数的视图之前：

<View>
    {shift.time_breakup.break_timings.map((item: any, index: any) => {
        console.log(item.break_in_time);
        return (
            <View>
                <Text>{item.break_in_time}</Text>
                <Text>{item.break_out_time}</Text>
            </View>
        );
    })}
</View>

【讨论】：

【解决方案2】：

你会得到无限循环，因为在每次渲染时你的函数 getShiftDetails 都会被重新定义，React 在每个渲染周期创建它的一个浅对象，你可以使用 useCallback 来记忆它并将 ID 声明为依赖数组。

【讨论】：

你能举例说明我如何做到这一点
@pratteekshaurya gabriel 的另一个答案与我的意思相同。