Reactjs 使用clearTimeout和setTimeout的正确方法？

每当我在setTimeout函数运行时离开屏幕时，就会出现内存泄漏错误。我知道我应该清除计时器，但它对我不起作用。我在某处遗漏了一些东西

这是我的密码。我删除了很多和这个问题无关的内容，所以请原谅，若一些语法看起来有误，或者有一个没有结束标记的

谢谢

export default class EditContent extends Component {
    timer;

    constructor(props) {
        super(props);

        this.state = {           
            isLoading: false,
            buttonMessage: 'Save Changes'
        }

    }

    componentWillMount(){
        this.timer
    }

    componentWillUnmount() {
        clearTimeout(this.timer)
    }


    handleLoading(bool) {
        this.setState({
            loading: bool,
            buttonMessage: !bool && 'Changes Saved!'
        })
        this.timer = setTimeout(() => {
            this.setState({ buttonMessage: 'Save Changes' })
        }, 5000);

    }



    handleBack() {
        clearTimeout(this.timer)
        this.props.navigation.goBack(null)
    }

    handleSaveChanges() {
        const { goBack } = this.props.navigation;
        this.handleLoading(true)

        this.props.updateDeliveryPickup()
            .then((resp) => {
                this.handleLoading(false)
                console.log('resp', resp)
            })
    }

    render() {
        const { pickup } = this.props


        return (

            <View style={styles.editWrapper}>


                <View style={styles.userStoreHeader}>
                    <Text>My Account</Text>
                </View>

                <Subheader onPressBack={() => this.handleBack()} />

                <View style={styles.summaryContainer}>

                    <SettingsButton
                        onPress={() => this.handleSaveChanges()}
                        buttonMessage={buttonMessage}
                    />

                </View>
            </View>
        )
    }
}

导出默认类EditContent扩展组件{
定时器；
建造师（道具）{
超级（道具）；
this.state={
孤岛加载：false，
按钮消息：“保存更改”
}
}
组件willmount（）{
这个是计时器
}
组件将卸载（）{
clearTimeout（this.timer）
}
手动加载（bool）{
这是我的国家({
加载：bool，
按钮消息：！bool&&“已保存更改！”
})
this.timer=setTimeout（（）=>{
this.setState（{buttonMessage:'Save Changes'}）
}, 5000);
}
车把{
clearTimeout（this.timer）
this.props.navigation.goBack（null）
}
handleSaveChanges（）{
const{goBack}=this.props.navigation；
此。手动加载（真）
this.props.updateDeliveryPickup（）文件
。然后（（resp）=>{
此。手动加载（错误）
console.log（'resp'，resp）
})
}
render（）{
const{pickup}=this.props
返回(
我的帐户
this.handleBack（）}/>
this.handleSaveChanges（）}
buttonMessage={buttonMessage}
/>
)
}
}

首先

onPress={（）=>这个.handleSaveChanges（）}

是一个糟糕的做法，它会为组件的每个渲染创建一个新函数，你应该直接编写

onPress={this.handleSaveChanges}

，同样的方法也可以应用到

onPressBack

：

---

在

handleLoading

中，在调用

this.timer=setTimeout…

之前，您可能需要调用

cleartimout（this.timer）

，每次调用handleLoading时，它都会创建一个新的计时器，但您不能确保计时器尚未分配给它，如果它已经分配了计时器，你不能保证它已经被清除。你能包括或链接到解释为什么JSX lambda是不好的实践的东西吗？这是一个很好的观点btwsee反应文档（这相当于在渲染中使用绑定），我想我在某个地方读到，当涉及到反应本机时，这样做并不是一个问题。。。但是我现在找不到这个信息。。需要做更多的研究。。否则，你的解决方案就成功了！谢谢：如果在React Native、onPress={（）=>this.handleSaveChanges（）}中不需要（在React或其他任何地方）创建其他函数，那么最好不要创建其他函数。但是，如果跳过括号，则没有任何效果：onPress={（）=>this.handleSaveChanges}，因为您只是指向函数，而不是运行它。