Question

状态更改中的间隔功能不起作用，请帮忙。

状态不变

function Home({ route, navigation }) {
const [ marker, setMarker ] = useState(0);

_stropeText = () => {
  if (marker == 0){
   setMarker(marker => 1);
  } else {
   setMarker(marker => 0);
  }
}

React.useEffect(() => {
    setLoading(true);
    const unsubscribe = navigation.addListener('focus', () => {
      setInterval(_stropeText, 500);
    });
    return () => {  };
  }, [navigation]);
}

https://snack.expo.io/Hbedd4HVh

Answer 1

您在marker值上have a closure，将其添加到useEffect依赖项数组，或使用带有useRef钩子的引用。

此外，您将回调传递给useState，它将产生functional updates，在此情况并非如此。

function Home({ route, navigation }) {
  const [marker, setMarker] = useState(0);

  React.useEffect(() => {
    setLoading(true);
    const _stropeText = () => {
      if (marker === 0) {
        setMarker(1);
      } else {
        setMarker(0);
      }
    };
    const unsubscribe = navigation.addListener("focus", () => {
      setInterval(_stropeText, 500);
    });
    return () => {
      /*remove listener*/
    };
  }, [navigation, marker]);
}

Answer 2

如果使用useState挂钩，则set函数接受一个参数，即您要设置的值。

_stropeText = () => {
  if (marker == 0){
   setMarker(1);
  } else {
   setMarker(0);
  }
}
setInterval(_stropeText, 500);

更新：

根据您提供的小吃，setLocation函数是异步的，因此您尝试在设置位置之前显示位置的新值。您需要一种效果，该效果可以响应location变量的值更改以显示新值。例如

React.useEffect(() => {
  alert(location)
}, [location])

反应本机间隔状态不更新

2 个答案: