为什么当我点击注册按钮时我的警报组件不起作用？

如何解决为什么当我点击注册按钮时我的警报组件不起作用？

我创建了 Alert 组件，一旦我提交注册表，它就会出现，但它没有，我不知道为什么？

PS;整个代码可在 Here

上找到

我使用了具有 3 个主要文件的上下文 api：

AlertState.js :

import React,{useReducer} from 'react'
import {v4} from 'uuid'
import AlertContext from './alertContext'
import AlertReducer from './alertReducer'
import {
     SET_ALERT,REMOVE_ALERT
} from '../types'

const AlertState = props => {
    const initialState = []

    const [state,dispatch] =  useReducer(AlertReducer,initialState)
    
    // Set Alert
    const setAlert = (msg,type,timeout=4000) => {
        const id = v4()
        dispatch({
            type: SET_ALERT,payload: {msg,id }
        })
        setTimeout(() => dispatch({type: REMOVE_ALERT,payload: id }),timeout )
    }

    return (
        <AlertContext.Provider
            value={{
                alerts: state,setAlert
            }}
        >
        {props.children}
        </AlertContext.Provider>
    )
}

export default AlertState

alertContext.js：

import {createContext} from 'react'
const AlertContext = createContext()
export default AlertContext

alertReducer.js：

import {
    SET_ALERT,REMOVE_ALERT
} from '../types'

export default (state,action) => {
    switch (action.type) {
        case SET_ALERT:
            return [...state,action.payload]
        case REMOVE_ALERT:
            return state.filter( alert => alert.id !== action.payload )
        default:
            return state;
    }
}

我还使用了一个名为“types.js”的文件，其中包含如下变量：

export const SET_ALERT = 'SET_ALERT'
export const REMOVE_ALERT = 'REMOVE_ALERT'

我像这样在“Register.js”中导入了“Alert”上下文：

import React,{useState,useContext} from 'react'
import AlertContext from '../../context/alert/alertContext'




const Register = () => {
    const alertContext = useContext(AlertContext)
    const {setAlert} = alertContext

    const [user,setUser] = useState({
        name:'',email:'',password:'',password2:'',})

    const {name,email,password,password2} = user

    const onChange = e => { setUser({...user,[e.target.name]: e.target.value})}

    const onSubmit = e => {
        e.preventSubmit()
        if(name==='' || email==='' || password==='' || password2===''){
            setAlert('Please enter all fields','danger')
        } else if (password!==password2){
            setAlert('Passwords do not match','danger')
        } else{
            console.log("Register OK")
        }
        
    }

    return (
        <div className='form-container'>
            <h1>Account <span className='text-primary'>Register</span></h1>
            <form onSubmit={onSubmit}> 
                <div className='form-group'>
                    <label htmlFor='name'>Name</label>
                    <input type='text' name='name' value={name} onChange={onChange}/>
                </div>
                <div className='form-group'>
                    <label htmlFor='email'>Email Address</label>
                    <input type='email' name='email' value={email} onChange={onChange}/>
                </div>
                <div className='form-group'>
                    <label htmlFor='password'>Password</label>
                    <input type='password' name='password' value={password} onChange={onChange}/>
                </div>
                <div className='form-group'>
                    <label htmlFor='password2'>Confirm Password</label>
                    <input type='password' name='password2' value={password2} onChange={onChange}/>
                </div>
                <input type='submit' value='Register' className='btn btn-primary btn-block' />
            </form>
        </div>
    )
}

export default Register

我创建了“Alerts.js”组件，具有：

import React,{useContext} from 'react'
import AlertContext from '../../context/alert/alertContext'

const Alerts = () => {
    const alertContext = useContext(AlertContext)

    return (
        alertContext.alerts.length > 0 && 
        alertContext.alerts.map(alert => (
            <div key={alert.id} className={`alert alert-${alert.type}`}>
                <i className='fas fa-info-circle' />{alert.msg}
            </div>
        ))
    )
}

export default Alerts

然后我将它导入到主应用程序“App.js”中：

import React,{Fragment} from 'react'
import './App.css';
import Navbar from './components/layout/Navbar'
import {BrowserRouter as Router,Route,Switch } from 'react-router-dom'
import Home  from  './components/pages/Home'
import About  from './components/pages/About'
import ContactState from './context/contact/ContactState'
import AuthState from './context/auth/AuthState'
import Register  from './components/auth/Register'
import Login  from './components/auth/Login'
import AlertState from './context/alert/AlertState'
import Alerts from './components/layout/Alerts'

const App = () =>  {
  return (
    <AuthState>
      <ContactState>
        <AlertState>
          <Router>
            <Fragment>
              <Navbar/>
              <div className="container">
                <Alerts/>
                <Switch>
                  <Route exact path='/' component={Home} />
                  <Route exact path='/about' component={About} />
                  <Route exact path='/register' component={Register} />
                  <Route exact path='/login' component={Login} />
                </Switch>
              </div>
            </Fragment>
          </Router>
        </AlertState>
      </ContactState>
    </AuthState>
  );
}

export default App;

任何帮助将不胜感激！