Question

我有一个context.js文件，其中定义了状态。

errorsFormEmployee: {
    firstName: true,
    lastName: true,
    email: false,
    phone: false,
    accountNumber: true,
    rate: false,
},

离开路线后，我想使用componentWillUnmount将值更改为状态上下文

errorsFormEmployee: {
    firstName: false,
    lastName: false,
    email: false,
    phone: false,
    accountNumber: false,
    rate: false,
},

这是我的路线：

import { AppContext } from '../../context';
import { Prompt } from 'react-router-dom';

class AddEmployee extends Component {
    state = {
        isMount: true,
    };

    componentDidMount() {
        this.setState(prevState => ({ isMount: !prevState.isMount }));
        // console.log(`Zamontowano ${this.state.isMount}`);
    }

    componentWillUnmount() {
        this.setState(prevState => ({ isMount: !prevState.isMount }));
        // console.log(`Wymontowano ${this.state.isMount}`);
    }
    render() {
        console.log(this.context);
        return (
            <AppContext.Consumer>
                {context => {
                    return (
                        <div className="addEmployee">
                            <h1 className="page-title">Dodaj pracownika</h1>
                            <ValidationErrorMessage />
                            <AddEmployeePageForm />
                            <div />
                            <Prompt
                                when={context.checkEmptyFields(this.state.isMount)}
                                message="Czy napewno chcesz porzucić wprowadzone dane?"
                            />
                        </div>
                    );
                }}
            </AppContext.Consumer>
        );
    }
}

export default AddEmployee;

当状态键的任何值为“ true”时，将激活

组件。离开Route之后，我希望这些值恢复为初始值。在退出路由后的这一刻，错误消息仍然可见

我的根文件中有AppProvider

render() {
        return (
            <Router>
                <AppProvider>
                    <div className="app">
                        <Navigation />
                        <Footer />
                        <div className="content">
                            <Switch>
                                <Route path="/" exact component={InstructionPage} />
                                <Route path="/add-employee-page" component={AddEmployeePage} />
                                <Route path="/employees" component={EmployeesPage} />
                                <Route
                                    path="/employeePanel/:name"
                                    render={props => <EmployeePanelPage {...props} />}
                                />
                                <Route path="/ranking" component={RankingPage} />
                                <Route component={ErrorPage} />
                            </Switch>
                        </div>
                    </div>
                </AppProvider>
            </Router>
        );
    }
}

export default App;

上下文API ComponentWillUnmount

0 个答案: