我收到來自 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
}
我正在使用以下函式從 api 獲取回應：
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>在螢屏上看到，而且在控制臺中我得到了無限回圈：
控制臺日志：
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
這是無限回圈
我不知道我做錯了什么
uj5u.com熱心網友回復：
- 嘗試
ID在getShiftDetailsuseCallback依賴項陣列內部添加。
const getShiftDetails = useCallback(() => {...}, [ID]) 我相信這就是導致無限回圈的原因
console.log在從 map 函式回傳視圖之前放置：
<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>
uj5u.com熱心網友回復：
你會得到無限回圈，因為在每次渲染時你的函式 getShiftDetails 被重新定義，React 在每個渲染周期創建它的一個淺物件，你可以使用 useCallback 來記住它并將 ID 宣告為依賴陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359721.html
標籤：javascript 打字稿 反应原生 映射