相关疑难解决方法(0)

我正在尝试创建一个加载组件，该组件将在React中使用setInterval每1000毫秒定期向div添加一个句点。我正在尝试使用文档中描述的方法清理setInterval。

https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

import React, { useEffect, useState } from 'react'

const Loading = () => {
    const [loadingStatus, setLoadingStatus] = useState('.')
    const [loop, setLoop] = useState()
    useEffect(() => {
        setLoop(setInterval(() => {
            console.log("loading")
            setLoadingStatus(loadingStatus + ".")
        }, 1000))

        return function cleanup() {
            console.log('cleaning up')
            clearInterval(loop)
        }
    }, [])
    return (<p>
        {`Loading ${loadingStatus}`}
    </p>)
}
export default Loading

但是，loadingStatus变量仅更新一次，即使组件停止安装后，setInterval循环也不会清除。我必须使用类组件吗？

我有这个非常简单的应用程序，我正在尝试实现倒计时，Start并且Stop功能似乎工作正常，但是当我按 时Stop， 的值seconds没有在视图中更新，这是所需的行为，但是当我观察控制台日志时，它显示sec我猜不断变化的值表明该值setInterval仍在运行且未清除。

这是附带的代码：

import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  TouchableOpacity,
  Dimensions,
} from "react-native";

const screen = Dimensions.get("screen");

export default function App() {
  const [seconds, setSeconds] = useState(4);
  const [start, setStartToggle] = useState(true);
  let [fun, setFun] = useState(null);
  const getRemaining = () => {
    const minute = Math.floor(seconds / 60);
    const second = seconds - minute * 60;
    return …