Question

我正在制作一个React应用程序，将用户名，密码和电子邮件提交到mongo数据库。

现在，我试图弄清楚如何在React内部检查用户或电子邮件是否已经存在。意思是这样，我可以显示一个错误框，告诉用户选择其他名称作为用户名。

当使用Node.js和Handlebars时，我确实知道该怎么做。我知道如何用猫鼬的Find（）方法检查数据库。但是我现在不知道如何使用React。当我检查用户是否已经在后端中并且表明该用户确实存在时，我如何通知我的前端（React）确实存在？

当我使用node.js和车把时，我会使用Flash消息，并且可以正常工作。我想我的问题可以归结为：如何使我的React前端与Node / Express后端合作，以共享有关数据库中现有用户名的信息？

我没有要显示的代码，这更多是在寻求有关我应该使用哪种工具或方法的建议。我只是想不通。

提前谢谢！

Answer 1

您需要让后端通知前端有关是否已使用电子邮件的信息，因为前端没有后端就无法知道。

基本上，当用户尝试注册时，您应该将注册请求从前端发送到后端，而不必担心重复的电子邮件。服务器的响应应指出注册是否成功，如果失败，为什么？

例如，您的React代码中的注册组件可能看起来像这样：

class RegistrationComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: "",
            password: "",
            error: "",
        }
    }

    handleSubmit = async event => {
        event.preventDefault();
        const { email, password } = this.state;

        const response = await sendRegisterRequest(email, password);
        const responseJson = await response.json();

        if (response.status !== 200) {
            this.setState({error: reponseJson.error});
        } else {
            // handle successful registration
        }
    }

    render() {
        const { error } = this.state;

        return (
            <form onSubmit={ this.handleSubmit }>
                <span>{ error }</span>
                { /* rest of the form */ }
            </form>
        )
    }
}

sendRegisterRequest是一些模块，用于处理向服务器发送注册请求。

请注意，此前端逻辑希望服务器在成功注册后以状态200进行响应，如果发生错误，则以其他状态（状态400）进行响应。另外，如果出现错误，服务器应以如下内容的有效负载主体进行响应：{"error": "That email is already in use"}。

您提到您知道如何检查服务器上的现有电子邮件地址，因此只需在创建新帐户之前以这种方式进行检查，如果该电子邮件地址已被使用，则发送状态为400的错误有效负载。

Answer 2

如果发生这种情况，您可以以400状态进行响应，然后以这种方式将错误消息发送到前端。例如返回res.status（400）.json（错误）。

该电子邮件已经存在验证

2 个答案: