-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
오류 이건 뭔가요???
22.08.15 22:03 작성 조회수 636
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관react-dom.development.js:18687
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관react-dom.development.js:18687
-인터넷창 오류- The above error occurred in the <input> component: at input at form at div at RegisterPage (http://localhost:3000/static/js/bundle.js:660:76) at Route (http://localhost:3000/static/js/bundle.js:46282:29) at Switch (http://localhost:3000/static/js/bundle.js:46484:29) at div at Router (http://localhost:3000/static/js/bundle.js:45901:30) at BrowserRouter (http://localhost:3000/static/js/bundle.js:45522:35) at App at Provider (http://localhost:3000/static/js/bundle.js:42903:5) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 react-dom.development.js:26923
Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. at assertValidProps (react-dom.development.js:2942:1) at setInitialProperties (react-dom.development.js:9920:1) at finalizeInitialChildren (react-dom.development.js:10950:1) at completeWork (react-dom.development.js:22193:1) at completeUnitOfWork (react-dom.development.js:26596:1) at performUnitOfWork (react-dom.development.js:26568:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) at recoverFromConcurrentError (react-dom.development.js:25850:1) at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)련 문의는 1:1 문의하기를 이용해주세요.
client-src-index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// import 'antd/dist/antd.css'
import { Provider } from 'react-redux';
import { applyMiddleware, createStore} from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import loginReducer from './_reducers';
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider
store = {createStoreWithMiddleware(
loginReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}>
<App />
</Provider>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
여기 문제 같아 보여요
redux 부분 뭔가 있는거 같은데 모르겠네요
loginPage.js
import React, { useState } from 'react';
import {useDispatch} from 'react-redux';
import { loginUser } from '../../../_actions/user_action';
function LoginPage(props) {
const dispatch = useDispatch();
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const onEmailHandler = (enent) => {
setEmail(enent.currentTarget.value)
}
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value)
}
const onSubmitHandler = (event) => {
event.preventDefault();
let body = {
email: Email,
password: Password
}
dispatch(loginUser(body))
.then(response => {
if(response.payload.loginSuccess) {
props.history.push('/')
} else {
alert("Error")
}
})
}
return (
<div style={{
display: 'flex', justifyContent: 'center', alignItems: 'center',
width: '100%', height: '100vh'
}}>
<form style={{desplay: 'flex', flexDirection: 'column'}}
onSubmit={onSubmitHandler}>
<input>Email</input>
<input type="email" value={Email} onChange={onEmailHandler} />
<label>password</label>
<input type="password" value={Password} onChange={onPasswordHandler}/>
<br/>
<button>
Login
</button>
</form>
</div>
);
}
export default LoginPage;
RegisterPage.js
import React, { useState } from 'react';
import {useDispatch} from 'react-redux';
import { registerUser } from '../../../_actions/user_action';
function RegisterPage(props) {
const dispatch = useDispatch();
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const [Name, setName] = useState("")
const [ConfirmPassword, setConfirmPassword] = useState("")
const onEmailHandler = (enent) => {
setEmail(enent.currentTarget.value)
}
const onNameHandler = (event) => {
setName(event.currentTarget.value)
}
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value)
}
const onConfirmPasswordHandler = (event) => {
setConfirmPassword(event.currentTarget.value)
}
const onSubmitHandler = (event) => {
event.preventDefault();
if(Password !== ConfirmPassword) {
return alert("비밀번호와 비밀번호 확인은 같아야 합니다.")
}
let body = {
email: Email,
password: Password,
name: Name
}
dispatch(registerUser(body))
.then(response => {
if(response.payload.success) {
props.history.push("/login")
} else {
alert("Failed to sign up")
}
})
}
return (
<div style={{
display: 'flex', justifyContent: 'center', alignItems: 'center',
width: '100%', height: '100vh'
}}>
<form style={{desplay: 'flex', flexDirection: 'column'}}
onSubmit={onSubmitHandler}>
<input>Email</input>
<input type="email" value={Email} onChange={onEmailHandler} />
<label>Name</label>
<input type="text" value={Name} onChange={onNameHandler}/>
<label>Password</label>
<input type="password" value={Password} onChange={onPasswordHandler}/>
<label>Confirm Password</label>
<input type="password" value={ConfirmPassword} onChange={onConfirmPasswordHandler}/>
<br/>
<button type='submit'>
회원 가입
</button>
</form>
</div>
);
}
export default RegisterPage;
답변을 작성해보세요.
답변 0