我怎样才能告诉我的计数器在达到特定数量时停止递增？

Question

我正在尝试实现一个计数器，该计数器在达到一定数量时停止，但我目前拥有的并没有停止。它似乎在不断增加；为什么是这样？和useEffect执行的时间、次数有关系吗？

const [counter, setCounter] = useState(0);
  useEffect(() => {
    if (counter < 10) {
      const interval = setInterval(() => {
        setCounter(counter => counter + 1);
      }, incrementRate);
      return () => clearInterval(interval);
    }
  }, []);

  return (
    <View>
      <Text>Circular progress bar</Text>
      <Text>{`${counter}`}</Text>
    </View>
  );

Answer 1

您在效果中使用了 useState 功能更新程序，这意味着它将使用其先前的状态来增加计数，这是正确的，但它会让您误以为效果正在正常工作. useEffect 工作原理的心智模型需要稍微改变一下，这真的很常见，以至于 Dan Abramov 在 useEffect 上写了一篇关于 useEffect 的文章。

快速修复是将 counter 添加到您的依赖项数组，这样您就可以告诉 React 它已更改，因此它不会再跳过更新效果。

useEffect(() => {
  if (counter < 10) {
    const interval = setInterval(() => {
      setCounter((counter) => counter + 1);
    }, incrementRate);
    return () => {
      clearInterval(interval);
    };
  }
}, [counter]);

这不是最干净的方法，因为您将清除间隔并在每次效果运行时创建一个新间隔。

然而，您可以改用 setTimeout 并完全避免清除间隔。

useEffect(() => {
  if (counter < 10) {
    setTimeout(() => {
      setCounter((counter) => counter + 1);
    }, incrementRate);
  }
}, [counter]);

我怎样才能告诉我的计数器在达到特定数量时停止递增？

How can I tell my counter to stop incrementing when it has reached a specific amount?

hook

setinterval

react-native