在 useEffect 钩子中设置状态不会改变状态值

Question

我正在用 React Native 编写应用程序，但我遇到了 useState 和 useEffect 挂钩问题。我想每 10 秒将增量状态值更改 1。

这是我的代码：

const [tripDistance, setTripDistance] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setTripDistance((prevState) => prevState + 1);

    console.log(tripDistance);
  }, 10000);
  return () => {
    clearInterval(interval);
  };
}, []);

但 console.log 的输出始终为 0。

我做错了什么？

Answer 1

输出始终为零，因为在您的 useEffect 中您没有监听 tripDistance 状态的变化。当您调用 setTripDistance 时，您无法立即访问更新后的值。

您应该添加另一个监听 tripDistance 的 useEffect 以获得正确的 console.log。

所以你必须这样做：

const [tripDistance, setTripDistance] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setTripDistance((prevState) => prevState + 1);
  }, 10000);
  return () => {
    clearInterval(interval);
  };
}, []);
useEffect(() => console.log(tripDistance), [tripDistance]);

Answer 2

试试这个

const [tripDistance, setTripDistance] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTripDistance((prevState) => prevState + 1);
    }, 10000);
    return () => {
      clearInterval(interval);
    };
  }, [tripDistance]);

在 useEffect 钩子中设置状态不会改变状态值

Setting state in useEffect hook does not change state value

reactjs

react-native

use-state