日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中useState的setState方法請求了好多次

作者：金斗潼關 更新時間： 2023-07-07 編程語言

1、問題描述

? ? ? ? 最近在寫react的時候碰到了一個很奇怪的問題。

?

?????????可以看到那個getXXX()的方法一直不斷的被調用，網頁一直請求，根本停不下來了。

2、產生原因

? ? ? ? 要弄明白這個原因，首先要先了解一下react生命周期。

????????react是組件式的編程，一個react項目啟動以后，先是會加載好網頁的DOM結構

?????????所謂的DOM結構，其實就是常見的一些web標簽，比如<html>、<body>這些。就是繪制一個網頁的基本框架。

?????????網頁的DOM結構加載完以后，再去渲染react組件到頁面上去（Mounting掛載階段，把組件插入真實DOM）。調用了setState（useState的setState）后，就到了第二個Updating更新重新渲染(render)階段。setState請求了好多次就是發生在Updating更新階段。

????????因為我是想在第一次打開這個頁面的時候，就從后端請求數據，并把返回的數據渲染到頁面上去，根據代碼是順序執行的，代碼從上往下順序執行，執行到getXXX()這個方法的時候，會請求后端以及渲染數據。但問題就出現在這里，getXXX()方法會被不斷的調用！因為每次setState()的時候都會重新render一次頁面（異步過程），于是整個頁面的代碼又會從頭到尾執行一次。相當于每次render都會順序把getXXX()里面的代碼都順序執行一下，每次render都又加了新的setState，然后無限嵌套，遞歸的這種......

3、解決方法

? ? ? ? 注：因為不方便直接貼公司的代碼，這里我就用自己寫的Demo了。

3.1、使用useEffect函數

? ? ? ? 在listAllPeople()方法外面再加一層方法getData()，在useEffect里面調用getData()，并把useEffect的第二個參數為[ ]，表示只在第一次render的時候調用一下。

const getData=()=>{
        //get請求無參數
        listAllPeople().then((response) => {
            const result = response.data;
            console.log(response);
            console.log(result);
            setpeopleDTOList(result.PeopleDTOList);
            console.log(peopleDTOList)
        });
};

useEffect(() => {
    getData();
}, []);

?????????然后你會發現，useEffect()調用了兩次getData()方法，這是由于嚴格模式下為了確保請求響應成功，所以特地多執行了一次useEffect。當然如果你不想請求兩次的話，也可以取消嚴格模式。找到入口頁面的<React.StrictNode>并刪除就退出嚴格模式了。

?????????退出嚴格模式后，useEffect就只執行了一次了。

4、總結

? ? ? ? 無

5、參考資料

React useEffect 兩個參數你用對了嗎 - 掘金

react 嚴格模式（控制臺調用兩次問題）_使用react.strictmode,接口調用兩次_輕狂的書生的博客-CSDN博客

使用 Effect Hook – React (reactjs.org)

Hook 簡介 – React (reactjs.org)

react 嚴格模式（控制臺調用兩次問題）_使用react.strictmode,接口調用兩次_輕狂的書生的博客-CSDN博客?react關閉嚴格模式-掘金 (juejin.cn)

react 嚴格模式（控制臺調用兩次問題）_使用react.strictmode,接口調用兩次_輕狂的書生的博客-CSDN博客

防止 React 觸發 useEffect 兩次 - 知乎 (zhihu.com)

useEffect – React

深入詳解React生命周期 - 掘金 (juejin.cn)

React 組件生命周期 | 菜鳥教程 (runoob.com)

HTML DOM 教程 | 菜鳥教程 (runoob.com)

原文鏈接：https://blog.csdn.net/weixin_42032770/article/details/131500338

  • 上一篇：沒有了
  • 下一篇：沒有了
欄目分類
最近更新