向服务器发送信息时出现问题，但页面不断刷新

Question

收到服务器的信息后，我正在修改并通过输入窗口发送信息。我制作它是为了在按下按钮时输入信息并将其发送到服务器。问题是当我点击按钮时屏幕会刷新。我不知道为什么没有代码要刷新。用于验证该函数是否正常工作的控制台值将显示出来，然后在刷新时消失。如果我按下按钮，它会刷新，所以我认为你只需要看看register函数。如果你能告诉我，我会很感激的，谢谢。

import React from 'react'
import { useEffect } from 'react';
import { useState } from 'react';
import styled from 'styled-components';
import Footer from '../components/Footer';
import NavigationBar from '../components/NavigationBar';
import axios from 'axios';
function ProfileChange() {
//get info
const [useId,setUserId] = useState("");  
console.log('아이디',useId)     
//look up the information through this function
useEffect(()=>{
axios.get('https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080/users/myprofile',{
headers: {
'X-ACCESS-TOKEN' : localStorage.getItem('jwt')
}
})
.then((response)=>{
console.log('정보조회성공여부:',response.data.message)
setUserId(response.data.result.id)
})
},[])

//change nickname
const [basicName,setBasicName] = useState("")
//change name
const [originName, setOriginName] = useState("")

//this is where I think there's a problem. It's a function that sends modified information to the server
const register = async (e) => {
console.log('forCheck')
await axios({
method: "patch", 
url: "https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080//users/edit_profile",
headers: {
'X-ACCESS-TOKEN' : localStorage.getItem('jwt')
},
data: {
"nickname" : originName,
"id" : basicName,
}
})
.then((response)=> {
console.log('result', response.data.isSuccess);
})
}

//this part is not important
const[passedMake,setPassedMake] = useState(false);
const toParentIsMake = (isMakeClick) => {
setPassedMake(isMakeClick)
}
const [ showModal, setShowModal ] = useState(false)
const show = () => setShowModal(true)
const hide = () => setShowModal(false)


return (
<>
<NavigationBar toParentIsMake={toParentIsMake} onShowModal={show} />
<ProfileWrap>
<div className='Wrap1'>
<article className='art1'>
<form className='art1_2'>
<div className='art1_2Div'>
<aside className='art1_2Aside'>
<label className='art1_2Label'>
이름
</label>
</aside>
<div className='art1_2AsideDiv2'>
<div className='art1_2Div4'>
<input
onChange={(e)=>{setBasicName(e.target.value)}}
value={basicName}
className='art1_2Div4Input'
placeholder='이름'>
</input>
</div>
<div className='art1_2Div'>
<div className='art1_2AsideDiv2'>
<div className='art1_2Div4'>
<input
onChange={(e)=>{setOriginName(e.target.value)}}
value={originName}
className='art1_2Div4Input'
placeholder='사용자 이름'>
</input>
</div>
</div>
</div>
<div className='art1_2AsideDiv2Idv'>
<button 
onClick={register}
className='art1_2AsideDiv2Idvbutton'>
submit
</button>
</div>
</div>
</div>
</form>
</article>
</div>
<Footer />
</ProfileWrap>
</>
)
}
export default ProfileChange;

Answer 1

这是表单中按钮的默认行为。当您单击它时，它会发送一个POST请求。要防止这种行为，请在处理程序中添加preventDefault。

const register = async (e) => {
e.preventDefault();
// ... other code
}