首页 > 解决方案 > 为什么按下提交按钮后所有数据都丢失了?

问题描述

我正在使用 react js 构建一个 CRUD 应用程序。我想编辑保存在数据库中的数据。在 UPDATE 部分,当我按下 UPDATE USER 按钮时,该行的所有日期都从前端的表和数据库中丢失。任何人都可以解决这个问题吗?这是 EditUser 页面的代码。帮我找出我在这里犯了什么错误

import axios from 'axios';
import { useHistory,useParams } from 'react-router-dom';


const EditUser=()=> {
    let history =useHistory();
    const {id} = useParams();
    
    const [user,setUser]= useState({
      name:"",
      username:""
    })
  
    const {name,username}=user;
    const onInputChange =(e)=>{
    setUser({...user,[e.target.name]:e.target.value})
    };

    useEffect(()=>{
        loadUser();
    },[]);
    const onSubmit = async e => {
      e.preventDefault();
      await axios.put(`http://localhost:3003/users/${id}`)
      history.push("/");
   
    };
    
    const loadUser = async () => {
        const result = await axios.get(`http://localhost:3003/users/${id}`)
        setUser(result.data);
    };
      return (
          <div>
              
              <form onSubmit={e =>onSubmit(e)}>
    <div class="mb-3">
      <label>Name</label>
      <input type="text"
        name="name"
        value={name}
        onChange={e=> onInputChange(e)}
      />
      <div >We'll never share your name with anyone else.</div>
    </div>
    <div class="mb-3">
      <label >User Name</label>
      <input type="text"
        name="username"
        value={username}
        onChange={e=> onInputChange(e)}
      />
    </div>
   
    <button type="submit" class="btn btn-primary">Update User</button>
  </form>
  
          </div>
      )
  }

export default EditUser;```

标签: crud

解决方案


推荐阅读