React native:使用计时器更改状态时，组件不会重新渲染

Question

我是本地反应的新手，我现在正在学习有关 Hooks 的基础知识。我创建了一个非常简单的组件，称为计时器，它有三个按钮 - 开始，停止和手动更改计数器。计数器是一个使用状态挂钩。 现在的问题是：当我通过从按钮调用 changeCounterHandler 函数来更改计数器时，一切都是正确的。当我启动计时器时，我可以看到它正在"滴答作响"，但计数器永远不会改变，组件也不会重新渲染。为什么？:-)

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;

谢谢 一月

Answer 1

看看这是否有效： 使用函数格式设置计数器： 设置计数器(计数器=>计数器+1(;