时间戳

首页 > 解决方案 > 挂钩值不会在重复调用中更新

javascript - 挂钩值不会在重复调用中更新

问题描述

我可以在 useEffect 中看到我的状态值正在更新，但是，在每 5 秒触发一次的函数中，该值仍然相同。有没有办法解决这个问题？

const [check, setCheck] = useState(true);

// Button to toggle Check
const buttonToToggleCheckValue = () => {
    console.log("Toggle check");
    setCheck(!check);
};

// Call this function every 5 seconds
const triggeredEveryFiveSeconds = () => {
    console.log("Check value: " + check); 
};

useEffect(() => {
    console.log("useEffect Check value: " + check);
}, [check]);

---output---

Check value: true
Check value: true
Check value: true
Toggle check
useEffect Check value: false
Check value: true             <--- Value should be false
Check value: true
Check value: true

标签： javascriptreact-native

解决方案

问题是，每当状态更改时，您的组件都会重新渲染并将状态初始化为 true。您可以使用 useRef ，如下面的代码片段所示。

const check = useRef(true);

  // Button to toggle Check
  const buttonToToggleCheckValue = () => {
    console.log('Toggle check');
    check.current = !check.current
  };

  // Call this function every 5 seconds
  const triggeredEveryFiveSeconds = () => {
    console.log('Check value: ' + check.current);
  };

  useEffect(() => {
    console.log('useEffect Check value: ' + check.current);
  }, [check]);

  useEffect(() => {
    setInterval(() => {
      triggeredEveryFiveSeconds();
    }, 5 * 1000);
  }, []);

ref 将在多个渲染中保持该值。

推荐阅读