此问题在此处已有答案：

How can I prevent refresh of page when button inside form is clicked?（16个回答）
11天前关闭。
我使用MERN堆栈建立一个简单的网站与CRUD功能每当我尝试更新的文件，我得到这些日志

name 1 email 1 mem phone 1jnk bundle.js:1014:13
XMLHttpRequest { readyState: 4, timeout: 5000, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "", status: 0, statusText: "", responseType: "", response: "", responseText: "" }
bundle.js:1032:17
config 
Object { transitional: {…}, adapter: (2) […], transformRequest: (1) […], transformResponse: (1) […], timeout: 5000, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", maxContentLength: -1, maxBodyLength: -1, env: {…}, … }
bundle.js:1036:15

字符串
服务器运行正常，我也注意到请求没有到达服务器。我试着在thunderclient和POSTMAN上运行PUT请求，注意到请求正确到达，我得到了正确的响应。

import React, { useEffect,useState } from 'react'

import axios from 'axios'

import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useNavigate } from 'react-router-dom'
import SendIcon from '@mui/icons-material/Send';

const EditMembers = () => {
    const [name,setName]=useState("")
    const [email,setEmail]=useState("")
    const [phone,setPhone]=useState("")
    const [membershipID,setMembershipID]=useState("")

    useEffect(()=>{
        setMembershipID(localStorage.getItem("MembershipID"))
        setName(localStorage.getItem("Name"))
        setEmail(localStorage.getItem("Email"))
        setPhone(localStorage.getItem("Phone"))
    },[])

    const navigate = useNavigate()

    const updateMember=async()=>{
        console.log(`http://localhost:5000/members/${membershipID}`)
        console.log(name,email,membershipID,phone)
        try{
            const res = await axios.put(`http://localhost:5000/members/${membershipID}`,
            {
                name,email,membershipID,phone
            },
            {timeout:5000,  })

            console.log(res)
            navigate('/members')
        } catch(error) {
                if (error.response) {
                    console.log("errror",error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                  } else if (error.request) {
                    console.log(error.request);
      
                  } else {
                    console.log('Error', error.message);
                                      
                  }
                  console.log('config',error.config);
            }
         }
        
    

    return (
        <>
    
    <Box onSubmit={updateMember}
      component="form"
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        '& .MuiTextField-root': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          id="outlined-multiline-flexible"
          type="text"
          multiline
          maxRows={4}
          label="Name"
          value={name}
          required
          onChange={(e)=>setName(e.target.value)}
        />
        <TextField
          id="outlined-multiline-flexible"
          type="email"
          multiline
          maxRows={4}
          value={email}
          label="Email"
          required
          onChange={(e)=>setEmail(e.target.value)}
        />
        <TextField
          id="outlined-multiline-flexible"
          multiline
          maxRows={4}
          label="Phone"
          value={phone}
          onChange={(e)=>setPhone(e.target.value)}
          required
        />
        <TextField
          id="outlined-multiline-flexible"
          multiline
          maxRows={4}
          label="MembershipID"
          value={membershipID}
          onChange={(e)=>setMembershipID(e.target.value)}
          required
        />
      </div>

      
 
      
      <Button  type="submit" size="large" variant="contained" color='success' endIcon={<SendIcon />} sx={{ mt: 2 }}>
        Submit
      </Button>
      </Box>
        </>
    )
}

export default EditMembers

型