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

Question

我正在尝试为我的反应应用程序自定义表单实现一个订阅复选框。因此，我的表单已经使用 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;

标签： reactjsformsmailchimpmailchimp-api-v3.0