React native 反应本机：组件在使用计时器更改状态时不会重新启动

我是个新手，现在正在学习钩子的基本知识。我创建了一个非常简单的组件，名为Timer，它有三个按钮-启动、停止和手动更改计数器。计数器是一个useState挂钩。 现在的问题是：当我通过从按钮调用changeCounterHandler函数来更改计数器时，一切都是正确的。当我启动计时器时，我可以看到它正在“滴答”响，但计数器从未改变，组件也没有重新启动。为什么？：-）

import React，{useState，useffect，useRef}来自'React'；
从“react native”导入{样式表、视图、按钮、文本}；
常量计时器=道具=>{
const[counter，setCounter]=useState（0）；
const timerId=useRef（）；
常量timerdimount=（）=>{
console.log（“timerdmount”）；
};
常量changeCounterHandler=（）=>{
设置计数器（计数器+1）；
log（`counter:${counter}`）；
};
常数startTimer=（）=>{
timerId.current=setInterval（changeCounterHandler，1000）；
};
常量停止计时器=（）=>{
清除间隔（timerId.current）；
};
返回(
{计数器}
)
};
const styles=StyleSheet.create({
});
导出默认定时器；

谢谢

---

Jan

查看是否有效：使用函数格式设置计数器：

---

设置计数器（计数器=>计数器+1）

是的，它起作用了！谢谢你的回答。我刚刚在react文档中也找到了它。但我不明白原因。你能解释一下为什么需要按函数更新它吗？因为当你设置计时器时，它会记住初始值计数器，它被称为闭包，这在JavaScript中是一个令人困惑的概念。计时器始终访问计数器的初始值。但是setState的函数格式是将先前呈现中的计数器值作为参数，并基于先前的状态值返回一个新值。

import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, View, Button, Text } from 'react-native';


const Timer = props => {

    const [counter, setCounter] = useState(0);

    const timerId = useRef();
    const timerDidMount = () => {
        console.log("timerDidMount");

    };

    const changeCounterHandler = () => {

        setCounter(counter+1);
        console.log(`counter: ${counter}`);
    };

    const startTimer = () => {
        timerId.current = setInterval(changeCounterHandler,1000);
    };
    const stopTimer = () => {
        clearInterval(timerId.current);
    };
return (

<View>
    <Text>{counter}</Text>
<Button title="Start timer" onPress={startTimer}></Button>
<Button title="Stop timer" onPress={stopTimer}></Button>
<Button title="change counter" onPress={changeCounterHandler}></Button>

</View>
)
};

const styles = StyleSheet.create({

});

export default Timer;