Блог

Я пытался скомпилировать это, но в браузере появилась ошибка. Помогите мне решить эту проблему.

это ошибка, отображаемая в браузере при компиляции:

Ошибка: Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: объект. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт.

Проверьте метод визуализации 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;
 

And this is the Authentication file for login

 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;