Question

我正在使用带有Context API的ReactJS处理状态的小型应用程序。

我有一个包含两个单独组件的“登录/登录”表单，这些表单在提交时显示验证错误（如果有）。我还具有一个Header组件，该组件显示用户是否已登录。该应用程序运行良好-用户可以注册，登录和注销...没有问题

问题是，如果我提交一个空的“注册/登录”表单，然后立即转到另一个页面，但返回，仍然看到验证错误。如果要离开当前页面，我希望清除状态中的那些验证错误。

我有一个提供程序类，用于保存所有状态，例如用于验证错误的数组，用户信息以及用户是否已登录。

登录/注册组件的所有功能都在提供程序类中。例如验证检查和对数据库的Axios调用。我想避免在Provider类中投入太多，但是我发现以这种方式更新User状态更加容易（如果没有错误，请将用户保存到数据库并更新状态以反映已登录的用户）

将所有内容保留在Provider类中也更加容易，因为如果用户成功注册，则可以调用Axios.GET函数来自动登录用户。

提供者类别（/context/index.js）

const AuthContext = React.createContext();

const initialState = {
  firstName: '',
  lastName:'',
  emailAddress: '',
  password: '',
  confirmPassword: '',
  signedIn: false,
  ID: '',
  errors: []
};

class Provider extends Component {
  state = initialState;


/*THIS CLASS CONTAINS AXIOS CALLS AND VALIDATION FUNCTIONS - OMITTED FOR CLARITY BUT HERE IS AN EXAMPLE OF HOW ERRORS IS SAVED TO STATE*/


signupValidation = (event) => {

/* VALIDATION CHECKS ARE OMITTED.
ERROR MESSAGES ARE PUSHED TO ERROR ARRAY AND SAVED TO STATE. IF NO ERRORS, PROCEED TO AXIOS.POST */

  this.setState({errors: errors})
  if(errors.length === 0) this.signup()
}



  render(){
    return (
      <AuthContext.Provider value = {{
        user: {...this.state},
        signedIn: this.state.signedIn,
        actions: {
          cancel: this.cancel,
          handleChange: this.handleChange,
          signupValidation: this.signupValidation,
          signinValidation: this.signinValidation,
        }
      }}>
        {this.props.children}
      </AuthContext.Provider>
    );
  };
};

UserSignUp.js

import React, {Component} from 'react';
import {Consumer} from './Context';

export default class UserSignUp extends Component {

  render(){
    return (
    <div className="bounds">
      <div className="grid-33 centered signin">
        <h1 className="append">Sign Up</h1>

        <Consumer>

/* IF THE ERROR ARRAY IN THE PROVIDER CLASS CONTAINS ERRORS - AN ERROR MESSAGE IS DISPLAYED */


          {({actions, user}) => (
            <React.Fragment>
              {user.errors.length > 0 ?    
                <div>
                <h2 className="validation--errors--label">Validation errors</h2>
                  <div className="validation-errors">
                    <ul>
                    {Object.keys(user.errors).map((key, i) => {
                      return (
                      <li key={key}>{user.errors[i]}</li>
                      )
                    })}
                    </ul>
                  </div>
                </div>
                  : null
              }

            <form onSubmit = {actions.signupValidation}>
              <div>
                <input id="firstName" name="firstName" type="text" placeholder="First Name" onChange={actions.handleChange}/>


/* OMITTED FOR CLARITY */

APP.JS

export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Provider>
            <Header />
            <Switch> 
              <Route path='/signin' component={UserSignIn} />
              <Route path='/signup' component={UserSignUp} />
              <Route path='/signout' component={UserSignOut} />
            </Switch>
        </Provider>
      </BrowserRouter>
    );
  };
};

理想情况下，我想在UserSignUp.js和UserSignIn.js中保留验证检查和axios.post/get调用

如果没有错误，请在提供程序中更新数据库并更改用户状态。我只是不确定如何使用Context API从外部render（）更新用户状态

OR

当路线更改时以某种方式清除错误状态。

使用上下文API在ReactJS中进行状态管理

0 个答案: