После выхода из пути состояние сбрасывается

Question

Я ввожу форму в путь /add-employee, который записывает данные в основной файл App.js. После заполнения полей и изменения пути я бы хотел, чтобы состояние было очищено до исходных настроек.

Я попытался ввести другой <Route>, который будет захватывать местоположение, и если это будет путь, отличный от /add-employee, состояние будет изменено, но это вызовет бесконечный цикл

В пути add-employee форма добавления сотрудника. После отправки формы сотрудник отображается в пути /employees.

//App.js
class App extends Component {
  state = {
    employeesList: [],
    id: 0,
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    accountNumber: '',
    rate: '',
    location: '',
  };

render() {
    const contextElements = {
      ...this.state,
      handleDate: this.handleDate,
      handleSubmit: this.handleSubmit,
    };
    return (
      <Router>
        <AppContext.Provider value={contextElements}>
          <div className="app">
            <Navigation />
            <Footer />
            <div className="content">
              <Switch>
                <Route path="/" exact component={InstructionPage} />
                <Route
                  path="/add-employee"
                  component={AddEmployee}
                  render={props => console.log(props.location.pathname)}
                />
                <Route path="/employees" component={Employees} />
                <Route path="/ranking" component={Ranking} />
                <Route component={ErrorPage} />
              </Switch>
            </div>
          </div>
        </AppContext.Provider>
      </Router>
    );
  }
}

Answer 1

Проверка маршрута для очистки состояния будет очень жесткой связью, которую лучше избегать.

Вместо этого мы можем иметь компонент AddEmployee, очищающий состояние на componentWillUnmount

Что-то вроде:

class AddEmployee extends Component {
  componentWillUnmount {
    this.props.clearForm();
  }
}

При определении маршрутов:

<Route
  path="/add-employee"
  render={props => <AddEmployee {...props} clearForm={this.clearState}/>}
/>

В this.clearState() очистите значения состояний, которые вам нужны.