Question

这个问题已经被问过好几次了，但我只能找到类组件而不是函数组件的答案，我的问题对我来说似乎有点奇怪，所以我对 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

Answer 1

问题与 useEffect 无关...组件只是在状态更新后没有重新渲染，因为我正在使用相同的值更新它。所以很明显 useEffect 没有被触发。

父状态更改后，React 子组件不会更新

1 个答案: