程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了设置状态后反应挂钩相当于回调函数大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决设置状态后反应挂钩相当于回调函数?

开发过程中遇到设置状态后反应挂钩相当于回调函数的问题如何解决?下面主要结合日常开发的经验,给出你关于设置状态后反应挂钩相当于回调函数的解决方法建议,希望对你解决设置状态后反应挂钩相当于回调函数有所启发或帮助;

useEffect当某些状态改变时,该钩子可以用来调用一个函数。如果将其currentRange作为第二个参数传递到数组中,则仅在currentRange更改时才调用该函数。

您还可以创建自己的自定义钩子,使用该useRef钩子来跟踪效果是否是第一次运行,从而可以跳过第一次调用。

const { useRef, useState, useEffect } = React;



function useEffectSkipFirst(fn, arr) {

  const isFirst = useRef(true);



  useEffect(() => {

    if (isFirst.current) {

      isFirst.current = false;

      return;

    }



    fn();

  }, arr);

}



function App() {

  const [currentRange, setCurrentRange] = useState("24h");



  useEffectSkipFirst(

    () => {

      console.log("hi");

    },

    [currentRange]

  );



  return (

    <button

      onClick={() => setCurrentRange(Math.floor(Math.random() * 24) + 1 + "h")}

    >

      Change range ({currentRange})

    </button>

  );

}



ReactDOM.render(<App />, document.getElementByID("root"));


<script src="https://unpkg.com/react@16/umd/react.development.Js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.Js"></script>



<div ID="root"></div>

解决方法

在反应中(在钩子之前),当我们设置状态时,我们可以在状态设置为这样后调用一个函数:

this.setState({},() => {//Callback})

钩子相当于什么?

我尝试这样做

const [currentRange,setCurrentRange] = useState("24h");

setCurrentRange(someRange,() => console.log('hi'))

但这没有用

有人知道解决方案吗?

大佬总结

以上是大佬教程为你收集整理的设置状态后反应挂钩相当于回调函数全部内容,希望文章能够帮你解决设置状态后反应挂钩相当于回调函数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: