在我的计时器结束时出现此错误："Can't perform a React state update on an unmounted component. This is a no-op, but it indicates..."

Question

所以我认为这是由于条件渲染和状态更改而发生的。这是我的渲染：

!isOn
    ?
        {...}
    :
        <CountDown
            until={2}
            onFinish={onFinish}
            digitStyle={styles.timerContainer}
            digitTxtStyle={styles.timerTextSize}
            timeToShow={mins >= 60 ? ["H", "M", "S"] : ["M", "S"]}
            timeLabels={{}}
            separatorStyle={styles.timerTextSize}
            showSeparator
        />

这是我的 onFinished 方法：

const onFinish = () => {
    setTimeHook({
        ...timeHook,
        isOn: 0,
    });
};

以及状态：

const time = {
    mins: 5,
    isOn: 0,
};

const [timeHook, setTimeHook] = useState(time);

我也不熟悉这个错误是什么意思，所以任何信息都很好。虽然代码运行良好，但我担心内存泄漏。那么我该如何解决这个问题呢？

Answer 1

是的，这是条件渲染的原因。在这种情况下，组件被完全清除。

您可以尝试将道具显示到 show/hide 组件 display?: "flex" | "none"。

这是一个例子

<View style={{ display: !isOn? 'flex' : 'none' }}>
  {...}
</View>
<View style={{ display: isOn? 'flex' : 'none' }}>
<CountDown
   until={2}
   onFinish={onFinish}
   digitStyle={styles.timerContainer}
   digitTxtStyle={styles.timerTextSize}
   timeToShow={mins >= 60 ? ["H", "M", "S"] : ["M", "S"]}
   timeLabels={{}}
   separatorStyle={styles.timerTextSize}
   showSeparator
/>
</View>

在我的计时器结束时出现此错误："Can't perform a React state update on an unmounted component. This is a no-op, but it indicates..."

Getting this error while my timer is ending: "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates..."

state

render

timer

reactjs

react-native