admin管理员组文章数量:1301534
I have successfully executed the post Axios call using hooks in React js. But I am not sure how to show the success message or error message catching from the api response and show it below the form. The message should be exactly what is written in the API response.
My Messageform:
const MessageForm = () => {
const url = ";
const [data, setData] = useState({
first_name: "",
last_name: "",
email:"",
phone:"",
msz:""
})
function submit(e){
e.preventDefault();
axios.post(url,{
first_name: data.first_name,
last_name:data.last_name,
email:data.email,
phone:data.phone,
msz:data.msz
})
.then(res=>{
console.log(res.data)
})
setData({
first_name: "",
last_name: "",
email:"",
phone:"",
msz:""
});
}
function handle(e){
const newdata = {...data}
newdata[e.target.id] = e.target.value
setData(newdata)
console.log(newdata)
// setData("");
}
return (
<div className="message-form">
<div className="container">
<div className="title">
<span>Contact Now</span>
<div className="main-title">Send us a message</div>
</div>
{/* form start */}
<form action="" className="apply" onSubmit={(e)=> submit(e)}>
<div className="row row-1">
{/* Name here */}
<div className="input-field name">
<label htmlFor="Name">First Name</label>
<input onChange ={(e) => handle(e)} value = {data.first_name}
required
type="text"
placeholder="Your First Name"
name="Name"
id="first_name"
/>
</div>
<div className="input-field name">
<label htmlFor="Name">Last Name</label>
<input onChange ={(e) => handle(e)} value = {data.last_name}
required
type="text"
placeholder="Your Last Name"
name="Name"
id="last_name"
/>
</div>
</div>
<div className="row row-2">
{/* phone here */}
<div className="input-field phone">
<label htmlFor="Phone">Phone</label>
<input onChange ={(e) => handle(e)} value = {data.phone}
required
type="text"
placeholder="Your Phone Here"
name="Phone"
id="phone"
/>
</div>
{/* Email here */}
<div className="input-field email">
<label htmlFor="Email">Email Address</label>
<input onChange ={(e) => handle(e)} value = {data.email}
required
type="text"
placeholder="Your Email Address"
name="Email"
id="email"
/>
</div>
</div>
{/* date select */}
<div className="row row-3">
{/* Message here */}
<div className="input-field message">
<label htmlFor="Message">Message</label>
<textarea onChange ={(e) => handle(e)} value = {data.msz}
required
placeholder="Enter Message Here"
name="Message"
id="msz"
/>
</div>
</div>
{/* submit button */}
<ExploreButton hoverText="Submit" hover="hoverTrue">
Send Now
</ExploreButton>
</form>
{/* Form end */}
</div>
</div>
);
};
export default MessageForm;
This is the response that I get from the api
Here I want to catch the string written in message and render it in the UI. I am new to react and I am not sure how to do that.
I have successfully executed the post Axios call using hooks in React js. But I am not sure how to show the success message or error message catching from the api response and show it below the form. The message should be exactly what is written in the API response.
My Messageform:
const MessageForm = () => {
const url = "https://example.herokuapp./api/messages"
const [data, setData] = useState({
first_name: "",
last_name: "",
email:"",
phone:"",
msz:""
})
function submit(e){
e.preventDefault();
axios.post(url,{
first_name: data.first_name,
last_name:data.last_name,
email:data.email,
phone:data.phone,
msz:data.msz
})
.then(res=>{
console.log(res.data)
})
setData({
first_name: "",
last_name: "",
email:"",
phone:"",
msz:""
});
}
function handle(e){
const newdata = {...data}
newdata[e.target.id] = e.target.value
setData(newdata)
console.log(newdata)
// setData("");
}
return (
<div className="message-form">
<div className="container">
<div className="title">
<span>Contact Now</span>
<div className="main-title">Send us a message</div>
</div>
{/* form start */}
<form action="" className="apply" onSubmit={(e)=> submit(e)}>
<div className="row row-1">
{/* Name here */}
<div className="input-field name">
<label htmlFor="Name">First Name</label>
<input onChange ={(e) => handle(e)} value = {data.first_name}
required
type="text"
placeholder="Your First Name"
name="Name"
id="first_name"
/>
</div>
<div className="input-field name">
<label htmlFor="Name">Last Name</label>
<input onChange ={(e) => handle(e)} value = {data.last_name}
required
type="text"
placeholder="Your Last Name"
name="Name"
id="last_name"
/>
</div>
</div>
<div className="row row-2">
{/* phone here */}
<div className="input-field phone">
<label htmlFor="Phone">Phone</label>
<input onChange ={(e) => handle(e)} value = {data.phone}
required
type="text"
placeholder="Your Phone Here"
name="Phone"
id="phone"
/>
</div>
{/* Email here */}
<div className="input-field email">
<label htmlFor="Email">Email Address</label>
<input onChange ={(e) => handle(e)} value = {data.email}
required
type="text"
placeholder="Your Email Address"
name="Email"
id="email"
/>
</div>
</div>
{/* date select */}
<div className="row row-3">
{/* Message here */}
<div className="input-field message">
<label htmlFor="Message">Message</label>
<textarea onChange ={(e) => handle(e)} value = {data.msz}
required
placeholder="Enter Message Here"
name="Message"
id="msz"
/>
</div>
</div>
{/* submit button */}
<ExploreButton hoverText="Submit" hover="hoverTrue">
Send Now
</ExploreButton>
</form>
{/* Form end */}
</div>
</div>
);
};
export default MessageForm;
This is the response that I get from the api
Here I want to catch the string written in message and render it in the UI. I am new to react and I am not sure how to do that.
Share asked Aug 29, 2021 at 7:06 ReactooReactoo 1,0402 gold badges20 silver badges62 bronze badges 2- Use toast repositories – Danial Commented Aug 29, 2021 at 7:08
- ask your backend forr response message – Edofx Commented Aug 29, 2021 at 7:10
2 Answers
Reset to default 3Your API is returning a response stream, you need to use the response .json() method to read it to pletion. But before you do that, you should store the response status code, as it bees inaccessible after you parse the response JSON.
axios.post(url,{
first_name: data.first_name,
last_name:data.last_name,
email:data.email,
phone:data.phone,
msz:data.msz
}).then(response => {
let statusCode = response.status,
success = response.ok;
response.json().then(response => {
if(!success){
//handle errors here
console.log(response.message)
return;
}
// handle successful requests here
console.log(response.message)
})
}).catch((error) => {
// catch any unexpected errors
console.log(error);
})
Some general advice. you should try to separate your Axios requests into an independent function and make it reusable, or you will run into issues in the future if you decide to handle your API responses differently in the future.
I cleaned it up a bit, so its easier to understand. The short answer is use an additional "useState" hook to store the messages. Then have a logical operator (in the return section above row-1) to check if messages exists & display them.
Warning: None of this code was tested.
const INITIAL = {
first_name: "",
last_name: "",
email: "",
phone: "",
msz: ""
}
const MessageForm = () => {
const url = "https://example.herokuapp./api/messages"
const [data, setData] = useState(INITIAL);
const [message, setMessage] = useState(null);
function handleSubmit(e) {
e.preventDefault();
setMessage(null);
axios.post(url, data)
.then(res => {
setData(res.data);
setMessage(res.message);
})
.catch(err => {
setMessage(err.message);
})
}
function handleChange(e) {
const { id, value } = e.target; //destructuring
setData({...data, [id]:value})
}
return (
<div className="message-form">
<div className="container">
<div className="title">
<span>Contact Now</span>
<div className="main-title">Send us a message</div>
</div>
{/* form start */}
<form className="apply" onSubmit={handleSubmit}>
{message && <div>{message}</div>}
<div className="row row-1">
{/* Name here */}
<div className="input-field name">
<label htmlFor="Name">First Name</label>
<input onChange={handleChange}
value={data.first_name}
required
type="text"
placeholder="Your First Name"
name="Name"
id="first_name"
/>
</div>
<div className="input-field name">
<label htmlFor="Name">Last Name</label>
<input onChange={handleChange}
value={data.last_name}
required
type="text"
placeholder="Your Last Name"
name="Name"
id="last_name"
/>
</div>
</div>
<div className="row row-2">
{/* phone here */}
<div className="input-field phone">
<label htmlFor="Phone">Phone</label>
<input onChange={handleChange}
value={data.phone}
required
type="text"
placeholder="Your Phone Here"
name="Phone"
id="phone"
/>
</div>
{/* Email here */}
<div className="input-field email">
<label htmlFor="Email">Email Address</label>
<input onChange={handleChange}
value={data.email}
required
type="text"
placeholder="Your Email Address"
name="Email"
id="email"
/>
</div>
</div>
{/* date select */}
<div className="row row-3">
{/* Message here */}
<div className="input-field message">
<label htmlFor="Message">Message</label>
<textarea onChange={handleChange} value={data.msz}
required
placeholder="Enter Message Here"
name="Message"
id="msz"
/>
</div>
</div>
{/* submit button */}
<ExploreButton hoverText="Submit" hover="hoverTrue">
Send Now
</ExploreButton>
</form>
{/* Form end */}
</div>
</div>
);
};
export default MessageForm;
版权声明：本文标题：javascript - How to show success or error message based on the response of the api in React js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741678407a2392021.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论