javascript - 如何使用 React-Redux 停止在 React 中显示错误消息

Question

我正在构建一个简单的页面，您可以在其中输入代码并根据后端检查代码。如果代码无效，后端会返回错误消息，如“抱歉，代码无效”。错误存储在 redux 状态中，因此组件可以接受并显示。但是我遇到的一个问题是，当用户离开然后返回到组件时，仍然会显示错误，因为状态没有改变。

目前我的解决方案是使用 useEffect 钩子来检查组件是否已卸载（这意味着用户导航到另一个路径）并触发 resetError 操作，它将 redux 状态“错误”设置为 null。但我想知道这是正确的方法还是有更好/更清洁的方法？

我正在使用 React + React-Router + React-Redux + Redux-Saga + material ui

这是我的代码

function RegisterContainer({ errors, resetRegisterErrors}) {
    // Other stuff...

    useEffect(() => {
        return function cleanup() {
            resetRegisterErrors()
        }
    }, []);

    return <Register setCode={setCode} handleSubmit={handleSubmit} errors={errors} />;
}

const Register = ({ setCode, handleSubmit, errors }) => {
    return (
        <Container className={classes.root} maxWidth="sm">
            <ListErrors errors={errors}></ListErrors>
            <form className={classes.form} noValidate onSubmit={handleSubmit}>
                <TextField variant="outlined"
                    margin="normal"
                    fullWidth
                    label="Code"
                    onChange={e => setCode(e.target.value)} />
                <Button type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                >
                    Register
                </Button>
            </form >
        </Container>)
}

// mapDispatchToProps, connect etc. 

标签： javascriptreactjsredux