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

Question

大家好，我是 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 管理仪表板中查看新订阅者以及联系人姓名和 phone 号码，但没有地址！我究竟做错了什么？我不能使用 gatsby 插件将这些数据传递给 Mailchimp 吗？这是一篇很长的文章 post，感谢您花时间提前阅读这篇文章 post。

Answer 1

在 _handleAddressChange 中，您应该将值保存到 state，而不是某个中间数组。

编辑：这样做的原因是每次contact组件re-renders（每次调用setState时它都会re-render），赋值to addressArr 将被重置为一个空数组。如果您希望该值在渲染之间持续存在，它应该 saved in state.

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>

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

Send address information to mailchimp using gatsby-plugin-mailchimp

reactjs

gatsby

mailchimp