使用 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 管理破折号中查看新订户以及联系人姓名和电话号码，但没有地址！我究竟做错了什么？我不能使用 gatsby 插件将此数据传递给 Mailchimp 吗？这篇文章很长，感谢您抽出宝贵时间提前阅读这篇文章。

Answer 1

在_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>