如何在 react 中正确清除 componentWillUnmount() 上的 Interval？

Question

我有一个表格可以呈现映射的patientInfo array。当patient.status 不为空/有值时，倒计时计时器开始为阵列中的个别患者倒计时。这发生在componentDidMount()。现在我想在componentWillUnMount() 上清除Interval，但倒计时并没有停止。

基本上我只需要在时间到 0 时清除倒计时。假设计时器从 60 秒到 0 时开始倒计时，清除间隔。没有停止按钮或类似的东西可以执行。当时间达到 0 秒时，我需要它自动清除间隔。当个体患者具有状态价值时，倒计时时间开始。希望这是有道理的

PatientInfo Array

patientInfo = [
           { count: 959999, room: "1", name: 'John Nero', status: ''},
           { count: 959999, room: "2", name: 'Shawn Michael', status: ''},
           { count: 959999, room: "3", name: 'Gereth Macneil', status: ''}
]

//starts countdown when the patient.status has value which comes from user input

componentDidMount() {

       this.countDownInterval = setInterval(() => {

           this.setState(prevState => ({

               patientInfo: prevState.patientInfo.map((patient) => {
                   if (patient.status !== '') {
                      // subtract a sec 
                       return { ...patient, count: patient.count - 1000};
                   }
                   return patient;
               })
           }));
       }, 1000);

   }

//when the patient.count is 950999 clearInterval doesn't work
//edited after some comments but still doesn't work

  componentWillUnmount() {

        this.state.patientInfo.map((patient) => {
            if (patient.count <= 950999) {
                clearInterval(this.countDownInterval);
            }
        });
    }

//after a few try the following seems to work but not sure if this is the correct way 


    componentDidMount() {


        this.countDownInterval = setInterval(() => {

            this.setState(prevState => ({

                patientInfo: prevState.patientInfo.map((patient) => {
                    if (patient.status !== '') {

                        if (patient.count <= 950999) {
                            clearInterval(this.countDownInterval);
                        }
                        return { ...patient, count: patient.count - 1000 };
                    }
                    return patient;
                })
            }));
        }, 1000);
    }

Answer 1

我认为这里的问题是您正在清除从componentWillUnmount 调用 setState 的间隔。如果组件要卸载，则无需设置更多状态。该组件将不存在。

Answer 2

来自docs，

componentWillUnmount() 在组件被卸载和销毁之前立即调用。在此方法中执行任何必要的清理，例如使计时器无效、取消网络请求或清理在 componentDidMount() 中创建的任何订阅。

和

您不应该在 componentWillUnmount() 中调用 setState()，因为组件永远不会被重新渲染。一旦组件实例被卸载，它将永远不会被再次装载。

你最多可以这样做，

componentWillUnmount() {
   clearInterval(this.countDownInterval);
}