ReactJS如何显示成功的常量函数

Question

我对reactjs相当熟悉，目前已经构建了一个表单，可以使用Axiom通过方法POST提交给API。

const handleSubmit = (e) => {
e.preventDefault();
const isValid = formValidation()
if (isValid) {
console.log("Form Valid: Processing on Backend")
// const data = new FormData(e.target);
processBackend()
e.preventDefault();
} else {
console.log("Form Invalid: Please check form")
}
}

我的handleSubmit将调用另一个函数processBack((

const processBackend = async () => {
let res = await postUsers(mobileCountryCode, mobileNumber, firstName, lastName, organization)
// console.log("postUsers.res:")
// console.log(res)
HandleResponse(res)
}

然后我想，我可以使用下面的代码来显示功能应用程序，以处理成功或失败的响应。但是，它没有出现。

const HandleResponse = (res) => {
console.log("HandleResponse.res:")
console.log(res)
console.log(res.status)
if (res.status === 200) {
return <ResponseSuccess />
} else if (res.status === 400 || res.status === 403 || res.status === 500) {
return <ResponseError />
} else {
return false
}
}
const ResponseSuccess = () => {
return (
<div className="notification">
<button className="delete"></button>
Successfully processed your request.
</div>
)
}
const ResponseError = () => {
return (
<div className="notification is-danger">
<button className="delete"></button>
There was an error processing your request.
</div>
)
}

我的渲染具有以下

return (
<div className="container">
<p>&nbsp;</p>
<h1 className="title">Users</h1>
<h2 className="subtitle">Create New User</h2>
<HandleResponse />
<form onSubmit={handleSubmit}>

我认为问题就在这里

if (res.status === 200) {
return <ResponseSuccess />
} else if (res.status === 400 || res.status === 403 || res.status === 500) {
return <ResponseError />
} else {
return false
}

当我去掉返回false，只返回成功或失败时，它就显示出来了。但是，在实际的res.status===200上，它没有显示出来。在控制台日志中。我可以看到它实际上是res.status=200。

展示成功或失败或正确处理的最佳方式是什么？

非常感谢你的帮助。

Answer 1

代码中的几个问题：

• 您没有对HandleResponse()函数的返回值执行任何操作

• HandleResponse()函数被异步调用。React组件或从HandleResponse()函数返回的任何其他值不会返回到代码中调用该函数的位置。异步函数的返回值不能像处理同步函数的返回数值那样进行处理。

解决方案：

在成功响应的情况下，可以在表示HTTP请求已成功执行的状态中保存一些值。基于此状态，可以呈现不同的组件或显示错误消息。

在handleResponse功能中，根据状态代码更新组件的状态

const HandleResponse = (res) => {
...
if (res.status === 200) {
setState('success');
} else {
setState('error');
}
}

则在JSX代码中根据作为HTTP请求的结果的响应来呈现适当的组件。

return (
...
{ state == 'success' && <ResponseSuccess/> }
{ state == 'error' && <ResponseError/> }
);

Answer 2

HandleResponse需要一个参数(res(，但您从未将其传入。在当前代码中，HandleResponse无法了解res。

如果您想保持If语句和HandleResponse组件不变，可以将其更改为将res作为道具：

const HandleResponse = ({res}) => /* rest of your code here */

然后，当您在渲染中使用组件时，需要将res作为道具传递：

<HandleResponse res={res} />

您需要更改processBackEnd，以便它在应用程序状态的某个位置更新res变量，而不是直接调用HandleResponse。