使用gatsby-plugin-mailchimp将地址信息发送到mailchimp

问题描述

大家好，我是react / gatsby和MailChimp的初学者。我正在尝试通过此简单的MailChimp注册表单发送地址和电子邮件地址。我查看了表单生成器，以查看MailChimp用什么命名地址输入字段。它以名为“ MMERGE3”的数组发送。然后，我检查了一个嵌入式表单，以查看如何传递各个地址字段数据。

这些是嵌入形式中各个输入字段的命名方式。

name="MMERGE3[addr1]" 

我的联系人组件在下面

import React from "react"
import Layout from "../components/LayoutComponent"
import addToMailchimp from "gatsby-plugin-mailchimp"


import { Component } from "react"
const addressArr = []

export class contact extends Component {
  state = {
    FNAME: null,LNAME: null,email: null,phone: null,MMERGE3: [],}

  _handleAddressChange = (value,name) => {
    addressArr[name] = value
  }

  _handleChange = e => {
    console.log({
      [`${e.target.name}`]: e.target.value,})
    this.setState({
      [`${e.target.name}`]: e.target.value,})
  }

  _handleSubmit = e => {
    e.preventDefault()
    console.log(addressArr)
    this.setState({
      MMERGE3: addressArr,})

    console.log("state being submitted",this.state.MMERGE3)

    console.log("submit",this.state)
    // Add loading DOM manipulations here
    addToMailchimp(this.state.email,this.state)
      .then(({ msg,result }) => {
        console.log("msg",`${result}: ${msg}`)

        if (result !== "success") {
          throw msg
        }
        alert(msg)
      })
      .catch(err => {
        console.log("err",err)
        alert(err)
      })
  }

  render() {
    return (
      <Layout>
        <div>
          <h1>Hi people</h1>
          <p>Submit the form below and check your browser console!</p>
          <div>
            <form onSubmit={this._handleSubmit}>
              <input
                type="email"
                onChange={this._handleChange}
                placeholder="email"
                name="email"
              />
              <input
                type="text"
                onChange={this._handleChange}
                placeholder="Phone"
                name="phone"
              />
              <br />
              <br />
              <input
                type="text"
                onChange={this._handleChange}
                placeholder="First Name"
                name="FNAME"
              />

              <input
                type="text"
                onChange={this._handleChange}
                placeholder="Last Name"
                name="LNAME"
              />
              <input
                type="address"
                onChange={e =>
                  this._handleAddressChange(e.target.value,e.target.name)
                }
                placeholder="Address"
                name="addr1"
              />

              <input
                type="address"
                onChange={e =>
                  this._handleAddressChange(e.target.value,e.target.name)
                }
                placeholder="Address Line 2"
                name="addr2"
              />
              <input
                type="address"
                onChange={e =>
                  this._handleAddressChange(e.target.value,e.target.name)
                }
                placeholder="zip"
                name="zip"
              />

              <input
                type="address"
                onChange={e =>
                  this._handleAddressChange(e.target.value,e.target.name)
                }
                placeholder="city"
                name="city"
              />
              <input
                type="address"
                onChange={e =>
                  this._handleAddressChange(e.target.value,e.target.name)
                }
                placeholder="State"
                name="state"
              />
              <input
                type="address"
                onChange={e =>
                  this._handleAddressChange(e.target.value,e.target.name)
                }
                placeholder="Country"
                name="country"
              />
              <input type="submit" />
            </form>
          </div>
        </div>
      </Layout>
    )
  }
}

export default contact

提交此表格后，我会收到一条成功响应消息。奇怪的是，这不是超时错误或非完整的地址响应错误。我可以在MailChimp管理员破折号中查看新订户以及联系人姓名和电话号码，但没有地址！我究竟做错了什么？我不能使用gatsby插件将此数据传递给Mailchimp吗？这是一篇很长的文章，因此感谢您抽出宝贵时间提前阅读此文章。

解决方法

在_handleAddressChange中，您应该保存要声明的值，而不是一些中间数组。

编辑：原因是每次contact组件重新渲染（并且每次调用setState时它将重新渲染），分配给addressArr的值将重置为空数组。如果您希望该值在渲染之间保持不变，则应将其保存为状态。

class Contact extends React.Component {
  state = {
    FNAME: null,LNAME: null,email: null,phone: null,MMERGE3: {}
  };

  _handleChange = (e) => {
    this.setState({
      [`${e.target.name}`]: e.target.value
    });
  };

  _handleAddressChange = (value,name) => {
    this.setState({
      MMERGE3: {
        ...this.state.MMERGE3,[name]: value
      }
    });
  };

  _handleSubmit = (e) => {
    e.preventDefault();
    const { email,...rest } = this.state;
    console.log(email,{ ...rest });
  };

  render() {
    return (
      <div>
        <form onSubmit={this._handleSubmit}>
          <input
            type="email"
            onChange={this._handleChange}
            placeholder="email"
            name="email"
          />
          <input
            type="text"
            onChange={this._handleChange}
            placeholder="Phone"
            name="phone"
          />
          <br />
          <br />
          <input
            type="text"
            onChange={this._handleChange}
            placeholder="First Name"
            name="FNAME"
          />

          <input
            type="text"
            onChange={this._handleChange}
            placeholder="Last Name"
            name="LNAME"
          />
          <input
            type="address"
            onChange={(e) =>
              this._handleAddressChange(e.target.value,e.target.name)
            }
            placeholder="Address"
            name="addr1"
          />

          <input
            type="address"
            onChange={(e) =>
              this._handleAddressChange(e.target.value,e.target.name)
            }
            placeholder="Address Line 2"
            name="addr2"
          />
          <input
            type="address"
            onChange={(e) =>
              this._handleAddressChange(e.target.value,e.target.name)
            }
            placeholder="zip"
            name="zip"
          />

          <input
            type="address"
            onChange={(e) =>
              this._handleAddressChange(e.target.value,e.target.name)
            }
            placeholder="city"
            name="city"
          />
          <input
            type="address"
            onChange={(e) =>
              this._handleAddressChange(e.target.value,e.target.name)
            }
            placeholder="State"
            name="state"
          />
          <input
            type="address"
            onChange={(e) =>
              this._handleAddressChange(e.target.value,e.target.name)
            }
            placeholder="Country"
            name="country"
          />
          <input type="submit" />
        </form>
      </div>
    );
  }
}


ReactDOM.render( <Contact />,document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>