쏘하드제이에스피..
122
2020-08-13 17:40:23
1
273

리액트 회원가입&로그인 질문입니다.


리액트 로그인 회원가입을 하면서 생기는 문제 질문드립니다.

다름이아니라 axios와 fetch를 두개 다 써보았지만 해결이 안되는대용 ㅠㅠ..

정상적으로 데이터를 서버에 보내게되고 , Link를 이용해서 다음 뷰로 넘어가야되는데 

생성후 db는 정상등록이되지만 아무반응이없고 한번 더 클릭시 bad request가 리턴됩니다 문제가 뭘까요 ㅠ..


const Join = () => {
const [ userIdsetUserId ] = useState('');
const [ userPwsetUserPw ] = useState('');
const [ userNamesetUserName ] = useState('');
const [ isJoinSuccesssetJoinSuccess ] = useState(false);

const createUserApi = (user=> {
    return fetch('http://localhost:4000/users/registrations', {
        method: 'POST',
        body: JSON.stringify(user),
        headers: {
        'Content-Type': 'application/json'
        }
        }).then(response => response.json());
        
};
const handleSubmit = async (e=> {
    e.preventDefault();
    try {
    const response = await createUserApi({
    email: userId,
    password: userPw,
    name: userName
    });
    if (response.result === 'OK') {
    setJoinSuccess(true);
    }
    } catch (err) {
    console.error('login error'err);
    alert('회원가입에 실패하였습니다. 잠시 후 다시 시도해주세요.')
    }
    };

    return (
        <div>
        {!isJoinSuccess && (
        <>
        <h2>Join</h2>
        <form
        onSubmit={handleSubmit}
        >
        <input
        type="email"
        name="user_id"
        value={userId}
        onChange={e => setUserId(e.target.value)}
        placeholder="id"
        />
        <input
        type="password"
        name="user_pw"
        value={userPw}
        onChange={e => setUserPw(e.target.value)}
        placeholder="pw"
        />
        <input
        type="text"
        name="user_name"
        value={userName}
        onChange={e => setUserName(e.target.value)}
        placeholder="name"
        />
        <button
        type="submit"
        >
        제출
        </button>
        </form>
        </>
        )}
        {isJoinSuccess && (
        <div>
        <p>회원가입을 축하합니다!</p>
        <Link to="/login">로그인</Link>
        </div>
        )}
        </div>
        );
        };
        
export default Join;
0