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

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

是的，这是条件渲染的原因。本例中，组件被完全清除。

您可以尝试display prop来显示/隐藏组件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>