Question

我一直在尝试编译它，但在浏览器中显示错误。帮我解决问题。

这是编译时浏览器显示的错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查 App 的渲染方法。

Check the render method of `App`.
▶ 21 stack frames were collapsed.
Module.<anonymous>
D:/Bug-Tracker/frontend/src/index.js:25
  22 |   reducer
  23 | })
  24 | 
> 25 | ReactDOM.render( 
  26 |   <Provider store ={store}>
  27 |   <App />
  28 |   </Provider>

这是我创建的react登录文件

// eslint-disable-next-line no-unused-vars
import React, {useState} from 'react'
import {useDispatch} from 'react-redux'
import {signIn} from '../../../Controllers/Redux/authSlice'


// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
    const dispatch = useDispatch();

    const [formInput, setFormInput] = useState({
        name:"",
        password:"",
    }) 

    function inputChanged(e){
        setFormInput({
            ...formInput,
            [e.target.name]:e.target.value
        })
    }
    function submit(e){
        dispatch(signIn(formInput));
        e.preventDefault();
    }


    return(
        <div className = "loginBG">
            <form className = 'login-panel'>
                <h1>Login:</h1>
                <input name ='name' placeholder = 'Name' onChange={inputChanged} value = {formInput.name}></input>
                <input name='password' type='password' placeholder ='Password' onChange={inputChanged} value ={formInput.password}></input>
                <button type="submit" onClick={submit}>Login</button>
            </form>
        </div>
    )
}

这是我创建的 App.js 文件

/* eslint-disable no-unused-vars */
import React from 'react';
import { useSelector } from 'react-redux'
import Login from './Views/Pages/Login/login'
import {BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Sidebar from './Views/Sidebar/sidebar'
import Dashboard from './Views/Pages/Dashboard/dashboard'
import ViewBugPage from './Views/Pages/viewBugs'
import CreateBug from './Views/Components/Bug Create/bugForm'


function App() {
  const {auth} = useSelector(state => state)
  return (
    <Router>
    {
    !auth.LoggedIn ? <Login />:
    <>

    <Sidebar />
    <Switch>
      <Route path ="/" exact ><Dashboard /></Route>
      <Route path ="/viewBugs"><ViewBugPage /></Route>
      
      <Router path="/create"> 
      <div classname='page-container'><CreateBug title='Create Bug' /></div> </Router> 
    </Switch>
    </>
    }
    </Router>
  );
}

export default App;

这是登录的认证文件

import {createSlice} from '@reduxjs/toolkit'

const slice = createSlice({
    name:"auth",
    initialState:{
        admin:false,
        LoggedIn:false,
    },
    reducers:{
        signIn:(state,action) => {
            // eslint-disable-next-line no-unused-vars
            const {name,password} = action.payload;
            state.LoggedIn = true;
            state.admin = true;
        },
        signOut:(state) => {
            state.LoggedIn = false;
            state.admin = false;
        },
        signUp:(state,action) => {
            // eslint-disable-next-line no-unused-vars
            const {name,email,password} = action.payload;
            state.LoggedIn = true;
            state.admin = true;
        },
        
    }
})

export default slice.reducer;

export const {signIn,signOut,signUp} = slice.actions;

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。你可能

0 个答案: