ReactJS如何在成功显示常量函数？

问题描述

我在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将调用另一个函数processBackend（）

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
            }

当我删除return false并仅返回成功或失败时，它会显示出来。但是，在实际的res.status === 200上没有显示。在控制台日志上。我可以看到它实际上是res.status = 200。

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

非常感谢您的帮助。

解决方法

代码中的问题对

对于HandleResponse()函数的返回值，您没有做任何事情
HandleResponse()函数被异步调用。从HandleResponse()函数返回的React组件或任何其他值都不会返回到代码中调用该函数的位置。无法像处理同步函数的返回值那样处理异步函数的返回值。

解决方案：

如果成功响应，则可以在表示HTTP请求成功完成的状态下保存一些值。基于此状态，您可以渲染不同的组件或显示错误消息。

在handleResponse函数中，根据状态码，更新组件的状态

const HandleResponse = (res) => {
    ...

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

然后在JSX代码中，根据HTTP请求的响应，呈现适当的组件。

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

HandleResponse期望有一个参数（res），但是您永远不会传递它。在当前代码中，HandleResponse无法知道{{1} }。

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

res

在渲染器中使用组件时，您需要通过const HandleResponse = ({res}) => /* rest of your code here */作为道具：

res

您需要更改<HandleResponse res={res} />，以使其在应用程序状态的某个位置更新processBackEnd变量，而不是直接调用res。

javascript reactjs reactjs