Axios提取参数在NEXJS中不起作用

Question

我正在与NextJS合作，我成功地在控制台中获得了“输入文本”（电子邮件）值，我正在尝试使用此值 为“参数值”，但“动态值（电子邮件）”，“ {emails}”的Instad保存在数据库中，换句话说，我想知道 如何使用“参数值”（动态），为什么我的成功或错误消息不显示？

我尝试使用以下代码来使用“动态值”

const emails = email; // getting email id successfully and i am trying to append as shown below
const res = await fetch('https://example.com/serge/admin-panel/Api/subscribe?email={emails}');

，第二个问题是“我在单击订阅按钮后不会获得成功或故障消息” 我尝试以下代码

{success 
                       ? 
                    <span className="flex items-center text-sm font-bold text-green-700"> 
                         {success}
                    </span> 
                       : 
                    <span className="flex items-center text-sm font-bold text-red-800">
                          {error} 
                    </span>
                }

是我的完整代码

import React, { useEffect, useState } from "react";

const Subscribe = () => {
 const [email, setEmail] = useState('');
 const [error, setError] = useState('');
 const [success, setSuccess] = useState('');

const subscribeMe = async (event) => {
            
            console.log('data is '+email);  
            const emails = email;
            console.log('emails id is '+emails);    
            
            event.preventDefault();
            const res = await fetch('https://exmple.com/serge/admin-panel/Api/subscribe?email={emails}');
            
            const { error, message } = await res.json();
            if (error) {
                    setError(error);
            } else {
                    setSuccess(message);
            }
};
    const changeEmail = (event) => {
        const email = event.target.value;
        setEmail(email);
    }
   return (
                <form className="row g-3" onSubmit={subscribeMe}>
                <div className="col-12">
                <input type="subscribe" className="form-control" id="subscribe2" name="email" type="email" placeholder="Please Subscribe" onChange={changeEmail}
                />

              <button type="submit" className="btn btn-primary mb-3">subscribe</button>
              </div>
                {success 
                       ? 
                    <span className="flex items-center text-sm font-bold text-green-700"> 
                         {success}
                    </span> 
                       : 
                    <span className="flex items-center text-sm font-bold text-red-800">
                          {error} 
                    </span>
                }

          </form>
        </div>
      </div>
    </div>
     
   )
}

Answer 1

首先，您必须按照DB字段值具有设置名称，否则必须将其发送到API调用之前，必须将其更改。

其次，您的电子邮件值不会传递到API，因为您在API URL中使用字符串您必须更改此字符串，直到符号``通过$ sign $ sign中我将在代码下向您展示的$。

const res = await fetch(`https://exmple.com/serge/admin-panel/Api/subscribe?email=${emails}`);

Answer 2

您在模板上犯了错误

const subscribeMe = async (event) => {
            
            console.log('data is '+email);  
            const emails = email;
            console.log('emails id is '+emails);    
            
            event.preventDefault();
            const res = await fetch(`https://exmple.com/serge/admin-panel/Api/subscribe?email=${emails}`);
            
            const { error, message } = await res.json();
            if (error) {
                    setError(error);
            } else {
                    setSuccess(message);
            }
};