亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將 axios 響應保存到狀態反應鉤子

將 axios 響應保存到狀態反應鉤子

揚帆大魚 2021-12-23 19:59:25
我正在嘗試使用鉤子將我從 Axios 得到的響應保存到狀態。但是,每當我嘗試使用鉤子時,組件都會無限次地重新渲染。const [orders, setOrders] = useState([]);const getUserOrders = async () => {        await API.getOrders(window.sessionStorage.id)            .then(res => setOrders(res.data.ordersArr))            .catch(err => console.log(err));}useEffect(() => {        if (logged_in) {            getUserOrders();        } else {            window.location.href = "/login";        }}, [orders])如果我控制臺日志 res.data.ordersArr 而不是使用 setOrders 鉤子,我就能看到預期的數據。當我使用鉤子時,它會不斷重新渲染。
查看完整描述

2 回答

?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

有幾件事你需要重構


您的 React Hook useEffect 具有依賴項orders,它將無限次重新渲染

.then 在 await 沒有任何意義之后,要么擺脫 async / await 要么包括承諾回調


    const getUserOrders = () => {

            API.getOrders(window.sessionStorage.id)

                .then(res => setOrders(res.data.ordersArr))

                .catch(err => console.log(err));

    }

    useEffect(() => {

            if (logged_in) {

                getUserOrders();

            } else {

                window.location.href = "/login";

            }

    }, [])


查看完整回答
反對 回復 2021-12-23
?
牧羊人nacy

TA貢獻1862條經驗 獲得超7個贊

useEffect每次orders狀態更改時,您的鉤子都會重新運行,當您的useEffect鉤子運行時,您從 API 獲取數據,然后設置orders. 這反過來又會觸發具有新值的渲染,orders從而使useEffect調用無效并使其再次觸發,最終導致無限循環。

您只想useEffect通過傳遞一個空的依賴項列表來強制運行一次useEffect(..., [])


查看完整回答
反對 回復 2021-12-23
  • 2 回答
  • 0 關注
  • 195 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號