javascript - 使用 axios 在 reactjs 中实现 HttpPut 请求
问题描述
我正在尝试更新用户详细信息,但我对如何put
在前端使用请求感到困惑。我在这里创建单个 Web 应用程序是我的代码,任何人都可以帮助我
import React from 'react';
import axios from 'axios';
export default class UpdateUser extends React.Component {
constructor(props) {
super(props);
this.state = {
id: "",
fullName: "",
Email: "",
Phonenumber: "",
service: { service: "options" },
Description: "",
show : false
};
}
componentDidMount() {
const userId = +this.props.match.params.id;
if(userId) {
this.findUserById(userId);
}
}
findUserById = (userId) => {
axios.get("https://localhost:44338/api/publicInfo/"+userId)
.then(response => {
if(response.data != null) {
this.setState({
id:response.data.id,
fullName:response.data.fullName,
Phonenumber:response.data.Phonenumber,
service:response.data.service,
Description:response.data.Description,
});
}
}).catch((error) => {
console.error("Error - "+error);
});
};
updateUser = event => {
event.preventDefault();
const user = {
id:this.state.id,
fullName:this.state.fullName,
Phonenumber:this.state.Phonenumber,
service:this.state.service,
Description:this.state.Description,
};
axios.put("https://localhost:44338/api/publicInfo/", user)
.then(response => {
if(response.data != null) {
this.props.history.push("/admin");
} else {
this.setState({"show":false});
}
});
};
userChange = event => {
this.setState({
[event.target.name]:event.target.value
});
};
render() {
const {fullName, Email, Phonenumber,service, Description} = this.state;
return (
<div>
<h3>
{<strong>Edit User Information</strong>}
</h3>
<div className="pwrapper">
<div className="form_wrapper">
<h1 className="feedTitle">
{"Update user details "}
</h1>
<form>
<div className="fullName">
<lable htmlFor="fullName">Full Name</lable>
<input
placeholder="fullName"
type="text"
name="fullName"
value={fullName}
onChange={this.userChange}
noValidate
/>
</div>
<div className="email">
<lable htmlFor="email">Email</lable>
<input
placeholder="example.someone@gmail.com"
type="email"
name="email"
value={Email}
onChange={this.userChange}
noValidate
/>
</div>
<div className="Phonenumber">
<label htmlFor="Phonenumber">Phone Number</label>
<input
type="text"
placeholder="XXX-XXX-XXXX"
className="form-control"
name="userName"
value={Phonenumber}
onChange={this.userChange}
/>
</div>
<div className="services">
<label htmlFor="service">Service</label>
<select value={service} onChange={this.userChange}>
<option name="options"> Choose one of your skill</option>
<option name="Plumbing Service"> Plumbing Service</option>
<option name="Moving Service">Moving Service</option>
<option name="Electrician"> Electrician</option>
<option name="Landscaping">Landscaping</option>
<option name="House Remodeling"> House Remodeling</option>
<option name="Canvas & pencil Art">
Canvas & pencil Art
</option>
<option name="Animatorse"> Animators</option>
<option name="Photography">Photography</option>
<option name="Logo Design">Logo Design</option>
</select>
</div>
<div className="description">
<lable htmlFor="suggestion">
Say few words that define you :
</lable>
<textarea
cols="20"
rows="6"
className="form-control"
id="message"
placeholder="It is like your resume.... "
value={Description}
onChange={this.userChange}
noValidate
></textarea>
</div>
<div className="createAccount">
<button type="submit" onClick={this.updateUser}>
{"Update"}
</button>
</div>
</form>
</div>
</div>
</div>
);
}
}
当我尝试put
使用上面的代码实现请求时,它显示错误。
解决方案
推荐阅读
- amazon-web-services - AWS SAM 部署:错误 fork/exec /var/task/myfunction:没有这样的文件或目录:PathError
- c++ - 有条件的 constexpr 变量
- python - 如何找到python中两个数字不同的最低有效位的位置?
- bash - 在文件夹的文件中查找随机生成的数字的总和
- java - 为什么无法连接到 Fragment 中的数据库
- android - 将 TextView 文本垂直对齐到 ConstraintLayout 中的 TextInputLayout 文本
- python - TypeError:“必需”是位置参数的无效参数
- laravel - 使用 Postman 的 API 中的 CRUD 应用程序
- visual-studio - Visual Studio 2019 继续在错误的路径中寻找 csproj
- spring-boot - 如何在 IBM mq 资源管理器中创建队列以及如何从 Spring Boot 应用程序连接到本地计算机中的该队列以读取消息?