crud - 为什么按下提交按钮后所有数据都丢失了?
问题描述
我正在使用 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;```
解决方案
推荐阅读
- python - 如何在 tkinter 中使用 Entry.get() 函数?
- tensorflow - 在不更改客户端代码的情况下使用 AWS Elastic Inference
- python - Css没有在Django中加载
- php - 是否可以在本地主机上使用 Instagram 基本显示 API?
- reactjs - Object 或 Boolean 如何在 Typescript 中声明类型
- null - express + express-graphql helloworld returns null
- c# - 部署的 azure 函数从 GraphApi Rest 调用收到错误请求,但操作成功
- unity3d - Unity3d 文本资源
- c# - 有没有办法使 Web API 方法成为内部方法?
- scala - Doobie 和 AWS Xray 追踪