关于 hooks 的问题,也不知道是不是我脑子短路了,想不出来 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
xingguang
V2EX    React

关于 hooks 的问题,也不知道是不是我脑子短路了,想不出来

  •  
  •   xingguang Apr 9, 2021 3793 views
    This topic created in 1847 days ago, the information mentioned may be changed or developed.

    背景是这样的,页面上一些按钮,每次点的时候都去调用后端接口,并且把状态保存起来,然后我用 useEffect 去做,每次数据变化都时候去调用后端接口,然后第一次进页面都时候要把状态请求过来,这样会导致数据变化,然后多请求一次后端接口,有没有什么好的方案去解决。 代码大致这样:

    useEffect(() => { axios.get(xxx).then((res) => { setData(res); }); }, []); useEffect(() => { axios.post(xxx); }, [data]) 
    17 replies    2021-04-09 17:24:37 +08:00
    zeyexe
        1
    zeyexe  
       Apr 9, 2021
    zeyexe
        2
    zeyexe  
       Apr 9, 2021
    第二个 useEffect 其实可以改成函数,然后代替 setData 的位置。
    pradon
        4
    pradon  
       Apr 9, 2021
    sgiyy
        5
    sgiyy  
       Apr 9, 2021
    1. 如二楼,post 请求写到函数里,在修改后调用
    2. 加个是否数据初始化完成的状态,放在第二个 useEffect 的依赖里,然后判断一下
    q673115816
        6
    q673115816  
       Apr 9, 2021 via Android
    再监听个点击状态?
    PeakFish
        7
    PeakFish  
       Apr 9, 2021
    第一次 data 是 undefinde 吧 , 写个 if 不行吗?
    ```
    if (data) {

    }
    ```
    PeakFish
        8
    PeakFish  
       Apr 9, 2021
    第一次 data 是 undefinde 吧 , 写个 if 不行吗?
    ```
    if (data) {
    ...
    }
    ```
    PeakFish
        9
    PeakFish  
       Apr 9, 2021
    useEffect(() => {
    if (data) {
    axios.post(xxx);
    }
    }, [data])
    ahaya
        10
    ahaya  
       Apr 9, 2021
    初始状态为空,你可以在状态里维护一个 pre 指向上一个状态(其实就是链表) 这样调用接口的时候先判断之前的状态,做一下判空就行了
    xingguang
        11
    xingguang  
    OP
       Apr 9, 2021
    @zeyexe
    @sgiyy
    需求是数据变化就立即调用接口的,所以增加出发按钮不太行,初始化判断了的,因为要保存状态,所以第一次进来的时候状态变化会触发一次 effect 。
    sweetcola
        12
    sweetcola  
       Apr 9, 2021
    我看你好像是需要根据 data 变化后执行 post,所以你可以试试这样做。用 useRef 来储存第一次获得的 data,在第二个 useEffect 进行 ref 和 data 是否相等判断。

    代码:
    const dataRef = useRef();
    const handleSetData = (data) => {
    setData(data);
    dataRef.current = data;
    }
    useEffect(() => {
    const fn = async () => {
    const res = await axios.get(xxx);
    handleSetData(res);
    };
    fn();
    }, []);
    useEffect(() => {
    if (dataRef.current === data) { return; }
    axios.post(xxx); // 如果 xxx 里涉及到 setData,用 handleSetData 代替
    }, [data])
    xiaoming1992
        13
    xiaoming1992  
       Apr 9, 2021
    如 5 楼第二点,加一个是否初始化完成的标记,可以放在 ref 里,应该是对当前的代码逻辑侵入最小的,放在 ref 里也不用依赖它
    CodingNaux
        14
    CodingNaux  
       Apr 9, 2021
    第一个 useEffect 是只在一次 render 之后执行
    第二个 useEffect 是从二次 render 之后开始执行

    如果是这样的,可以加个 ref 表示是否第一次执行

    ```jsx
    const firstRenderRef = React.useRef(true);

    useEffect(() => {
    firstRenderRef.current = false;
    axios.get(xxx).then((res) => {
    setData(res);
    });
    }, [])
    ```
    CodingNaux
        15
    CodingNaux  
       Apr 9, 2021   1
    第一个 useEffect 是只在一次 render 之后执行
    第二个 useEffect 是从二次 render 之后开始执行

    如果是这样的,可以加个 ref 表示是否第一次执行

    ```jsx
    const firstRenderRef = React.useRef(true);

    useEffect(() => {
    firstRenderRef.current = false;
    axios.get(xxx).then((res) => {
    setData(res);
    });
    }, []);

    useEffect(() => {
    if (firstRenderRef.current) return;
    axios.post(xxx);
    }, [data])
    ```
    xingguang
        16
    xingguang  
    OP
       Apr 9, 2021
    @CodingNaux 感谢,最后确实还是用 ref 做的,我个人喜好不是很喜欢用 ref,不到无法解决的地步不太喜欢用,不过还是屈服于现实了
    CodingNaux
        17
    CodingNaux  
       Apr 9, 2021
    @CodingNaux 上面代码有问题。 两个 useEffect 调换下顺序,或者在最后写个单独的 effect 去改 flag,useEffect 的顺序有影响的。
    About     Help     Advertise     Blog     API     FAQ     Solana     2388 Online   Highest 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 63ms UTC 15:57 PVG 23:57 LAX 08:57 JFK 11:57
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86