NextJS在页面上显示API消息

f1tvaqid 于 2023-02-12 发布在其他

关注(0)|答案(2)|浏览(158)

我有一个登录表单，用户在表单中输入用户名/密码并提交，表单使用fetch（）向后端API发送请求并获得响应。
我希望在页面上显示来自API的消息。该消息将为{apiErrorMessage}
例如，用户的帐户可能被锁定，密码可能错误，电子邮件地址还无法确认。
在过去，我会使用C# Razor页面使用部分页面更新 AJAX 。这是一个NextJS项目，不知道如何做到这一点。
我应该使用服务器端渲染吗？我应该使用客户端渲染吗？UseEffect（）钩子？
我仍然希望页面看起来很好的搜索引擎优化的目的。
我在想，也许我们必须使用第二个页面来做这件事与SSR？登录结果页面或什么？
任何帮助感激：）谢谢！

const Login = () => {

    let apiErrorMessage = "";

    const loginFormSubmit = async (event) => {

    event.preventDefault()

    // Get data from the form.
    const data = {
      username: event.target.username.value,
      password: event.target.password.value,
    }

    const JSONdata = JSON.stringify(data)

    const response = await fetch(`/api/login`)

    const result = await response.json()

    if (response.ok){
        router.push('/dashboard');
    }
    else {
        // Get the error message from API
        apiErrorMessage = result.message;
    }
}

return (
        <div>
            <form onSubmit={loginFormSubmit}>
                <div className="mb-4">
                    <label htmlFor="username"><b>Username</b></label>
                    <input type="text" id="username" required/>
                </div>
                <div className="mb-4">
                    <label htmlFor="password"><b>Password</b></label>
                    <input type="password" id="password" required/>
                </div>
                <button type="submit">Login</button>
            </form>
        </div>
        <div>
            <p>{apiErrorMessage}</p>
        </div>
 )
}

export default Login;

next.js

来源：https://stackoverflow.com/questions/75420567/nextjs-display-api-message-on-the-page

2条答案

按热度按时间

hgqdbh6s1#

你不需要创建一个页面，你可以创建一个简单的useState钩子：

const [errorMsg,setErrorMsg] = useState('');

当用户登录失败时：

else {
   // Get the error message from API
   setErrorMsg(result.message)
}

现在在<form>下创建一个<div>，它只在errorMsg !== ''出现以下情况时显示：

{errorMsg === '' ? '' : (<div>
   <p>login failed : ${errorMsg}</p>
</div>)}

就这么简单。

赞(0）回复(0）举报 2023-02-12

ohfgkhjo2#

我想不出有什么理由需要为一个只接受用户输入并返回错误响应或将其转发到页面的登录组件进行良好的SEO。
由于/pages中的所有内容默认都是Client component，所以我认为最好的方法是简单地使用state和effects。

import {useState} from 'react';
import { useRouter } from 'next/navigation';

const Login = () => {
  const [apiErrorMessage, setApiErrorMessage] = useState('');
  const router = useRouter();

  const loginFormSubmit = async (event: any) => {
    event.preventDefault();

    // Get data from the form.
    const data = {
      username: event.target.username.value,
      password: event.target.password.value,
    };

    const JSONdata = JSON.stringify(data);

    const response = await fetch(`/api/login`);

    const result = await response.json();

    if (response.ok) {
      router.push("/dashboard");
    } else {
      // Get the error message from API
      setApiErrorMessage(result.message);
    }
  };

  return (
    <div>
      <div>
        <form onSubmit={loginFormSubmit}>
          <div className="mb-4">
            <label htmlFor="username">
              <b>Username</b>
            </label>
            <input type="text" id="username" required />
          </div>
          <div className="mb-4">
            <label htmlFor="password">
              <b>Password</b>
            </label>
            <input type="password" id="password" required />
          </div>
          <button type="submit">Login</button>
        </form>
      </div>
      <div>
        <p>{apiErrorMessage}</p>
      </div>
    </div>
  );
};

export default Login;

赞(0）回复(0）举报 2023-02-12

我来回答

NextJS在页面上显示API消息

2条答案

相关问题

热门标签

最新问答