使用 React-app 中的 Mailchimp API 订阅复选框

问题描述

我正在尝试为我的 React 应用自定义表单实现订阅复选框。所以我的表单已经使用 FormSubmit 向电子邮件地址提交了一封电子邮件，所以我试图让该复选框和提交按钮也可以用于订阅 mailchimp 电子邮件受众。
现在我不知道我是否可以在组件中正确地做到这一点，但这是我拥有的组件的代码：它没有将电子邮件和姓名发送给 mailchimp 受众。启动反应服务器时没有错误

import React,{ useState } from 'react';
import './styles.contactform.css';
import mailchimp from "@mailchimp/mailchimp_marketing";




function ContactForm() {
    const [name,setName] = useState('');
    const [email,setEmail] = useState('');
    const [message,setMessage] = useState('');
    const [isChecked,setIsChecked] = useState(false);
    
    mailchimp.setConfig({
        apiKey: process.env.REACT_APP_MAILCHIMP_KEY,server: process.env.REACT_APP_MAILCHIMP_SERVER,});
      
      const listId = process.env.REACT_APP_LISTID;
      const subscribingUser = {
        fullName: name,status: null,email: email
      };
      
      function subscribed(){
          if (isChecked === true){
              subscribingUser.status = "subscribed"
          }else {
              subscribingUser.status = "unsubscribed"
          }
      };
      
      function run() {
          subscribed()
          mailchimp.lists.addListMember(listId,{
              email_address: subscribingUser.email,status: subscribingUser.status,FNAME: subscribingUser.fullName,}).then((response) => {
              console.log(
                  `Successfully added contact as an audience member. 
                  The contact's id is ${response.id}.`
              );
          }).catch((err) => console.log(err))
        } ;
        
        
       

   
    
    
    const handleSubmit = (e) => {
        run(e)
        console.log(name,email,message)
       
    

    };

    

    return (
        <div className="contact-container">
            <form className="contact-form" action={process.env.REACT_APP_FORMSUBMIT} method="POST">
                <input type="hidden" name="_next" value={process.env.REACT_APP_FORMEMAIL}/>
                <input type="text" value={name} id="name" name="name" placeholder="Name..." onChange={(e) => setName(e.target.value)} required/>
                <input type="email" value={email} id="email" name="email" placeholder="Email..." onChange={(e) => setEmail(e.target.value)} required/>
                <img className="letter-img"  src="contact_form_imagepng.png" alt="Mail Letter"/>
                <input id="message" value={message} name="message" placeholder="Your message..." onChange={(e) => setMessage(e.target.value)}/>
                <div className="sub-Box">
                    <input id="subscribe" type="checkBox" className="checkBox" checked={isChecked} onChange= {(e) => setIsChecked(e.currentTarget.checked)} />
                    <span className="checkmark" onClick={() => setIsChecked(!isChecked)}></span>
                    <label className="sub-label" for="subscribe">Subscribe to email list</label>
                </div>
                <button type="submit" value="Submit" onSubmit={handleSubmit}>Submit</button>
            </form>


            
        </div>
    );
}

export default ContactForm;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）