问题描述
这个问题已经被问过好几次了,但我只能找到类组件而不是函数组件的答案,我的问题对我来说似乎有点奇怪,所以我对 React 为什么会这样。
我想在 React Native 中创建一个计时器。
当计时器结束时,它会触发 onTimeEnd
方法,该方法更新 App 组件的状态并触发 Timer 组件的 useEffect
道具上的 timeInSec
。
App 组件的重置按钮被按下时,会更新 App 组件的状态,但不会触发 useEffect
Timer 组件。我不明白为什么。
我希望你能明白我对我的代码的意思(我删除了我认为不会影响此代码的其他功能)。
App
组件:
import React,{ useState } from 'react'
import { TouchableOpacity,StyleSheet,Text,View,TextInput } from 'react-native'
import Layout from './components/Layout'
import Timer from './components/Timer'
const App = () => {
const defaultTime = 20
const [timeLeft,setTimeLeft] = useState(defaultTime)
const onTimeEnd = () => {
setTimeLeft(defaultTime)
}
const resetTimer = () => {
setTimeLeft(defaultTime)
}
return (
<Timer
timeInSec={timeLeft}
onTimeEnd={onTimeEnd}
/>
<TouchableOpacity onPress={resetTimer}>
<Text>Reset</Text>
</TouchableOpacity>
);
}
export default App
Timer
组件:
import React,{ useEffect,useState } from 'react'
import { View,Text} from 'react-native'
const Timer = (props) => {
const [timeInSec,setTimeInSec] = useState(props.timeInSec)
useEffect(() => {
const interval = setInterval(() => {
const newTime = timeInSec - 1
setTimeInSec(newTime)
if (newTime === 0) {
clearInterval(interval)
props.onTimeEnd()
}
},1000)
return () => clearInterval(interval)
})
useEffect(() => {
// This useEffect is triggered when the state of the App component changes from the onTimeEnd function,// but not when it changes from the resetTimer function. Why ?
setTimeInSec(props.timeInSec)
},[props.timeInSec])
return (
<View>
<Text>{ timeInSec }</Text>
</View>
)
}
export default Timer
解决方法
问题与 useEffect 无关...组件只是在状态更新后没有重新渲染,因为我正在使用相同的值更新它。所以很明显 useEffect 没有被触发。