成功消息没有在reactjs的UI中呈现

Question

我已经成功地使用React js中的钩子执行了post-Axios调用。但是，在提交表单之后，来自api响应的消息并没有呈现在UI中。我可以在控制台中看到消息，但在UI中看不到。

const MessageForm = () => {
const [message, setMessage] = useState(null);
const url = "https://example.herokuapp.com/api/messages"
const [data, setData] = useState({
first_name: "",
last_name: "",
email:"",
phone:"",
msz:""
})
function submit(e){
e.preventDefault();
setMessage(null);
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)
setMessage(res.message)
console.log(res.message)
})
.catch(err => {
setMessage(err.message);
})
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)}>
{message}
<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;

这里我把jsx {message}放在表单提交的下面，但它没有在ui中呈现。

Answer 1

代码中的一切都是ok的))您只需在<form>中插入一条消息，而不会看到它:https://codesandbox.io/s/react-playground-forked-ch4ij?file=/MessageForm.js