表单输入未显示在首页加载中

Question

缺少表单输入

我的表单输入未显示在首页加载中！当我转到另一个页面，一切都解决了。而这只是netlify的问题，当我按时部署时，问题就消失了（问题在开发中也不常见，或者与gatsby服务捆绑在一起）。

我很确定这是因为netlify添加了唯一的代码以使表单正常工作，如果这是问题，那就不知道了。

这是2个部署：

[x] netlify：https://vigilant-torvalds-72b098.netlify.com/

[x]浪涌：http://hallowed-sand.surge.sh/

我尝试更改表单名称，但无济于事。

是否有解决此问题的方法？

这是我的代码

此确切代码可与我的其他多页表单一起使用（请参见网站）。当我访问网站上的另一个页面时，一切都可以找到。

import Grid from "@material-ui/core/Grid"
import { FaMapMarkerAlt, FaTruck } from "react-icons/fa"
import { Link } from "gatsby"
import { navigateTo } from "gatsby-link"

// Styles
import "./footer.scss"
import "../elements/subscribeForm.scss"

// Images
import nglogo from "../images/ng-logo.png"

// Form Helpers
function encode(data) {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}

export default class footer extends Component {
  state = {
    footerEmail: "",
    type: "email"
  }

  handleChange = e => {
    this.setState({
      footerEmail: e.target.value,
    })
  }

  handleSubmit = e => {
    e.preventDefault()
    const form = e.target
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": "subscribeFormFooter",
        ...this.state,
      }),
    })
      .then(() => navigateTo(form.getAttribute("action")))
      .catch(error => alert(error))
  }

  render() {
    return (
      <footer className="footer">
        <Grid container className="footer__item" spacing={32}>
          <Grid item xs={12} sm={12} md={5} lg={5} className="footer__item1">
            <h1>Be Future Ready</h1>
            <p>
              Our dedication to innovation and efficiency helps us provide our
              customers with long-term savings. <br />
              Subscribe to our newsletter to receive timely updates on products,
              services and global developments.
            </p>
            <form
              name="subscribeFormFooter"
              method="post"
              action="thankyou/"
              data-netlify="true"
              onSubmit={this.handleSubmit}
              className="subscribe__input"
            >
              <input
                type={this.state.type}
                name="footerEmail"
                placeholder="Email Address"
                onChange={this.handleChange}
                value={this.state.footerEmail}
              />
              <button
                type="submit"
                disabled={!this.state.footerEmail}
                style={
                  !this.state.footerEmail
                    ? { backgroundColor: "#c8d6e5", cursor: "default" }
                    : {}
                }
              >
                Subscribe
              </button>
            </form>
          </Grid>
          <Grid item xs={12} sm={12} md={2} lg={2} className="footer__item2">
            <h2>Sitemap</h2>
            <ul>
              <Link to="/projects">
                <li>Projects</li>
              </Link>
              <Link to="/downloads">
                <li>Downloads</li>
              </Link>
              <Link to="quote">
                <li>Quote</li>
              </Link>
            </ul>
          </Grid>
          <Grid item xs={12} sm={12} md={2} lg={2} className="footer__item3">
            <h2>Connect</h2>
            <ul>
              <a href="https://www.facebook.com/gundapowerpvt/" target="blank">
                <li>Facebook</li>
              </a>
              <a
                href="https://www.linkedin.com/company/14446246/"
                target="blank"
              >
                <li>LinkedIn</li>
              </a>
              <a href="mailto:info@gundapower.com" target="_top blank">
                <li>Email</li>
              </a>
            </ul>
          </Grid>
          <Grid item xs={12} sm={12} md={3} lg={3} className="footer__item4">
            <h2>Contact</h2>
            <h5>
              <FaMapMarkerAlt /> Administrative Office
            </h5>
            <p>123/10 Pannipitiya Road Battaramulla, Sri Lanka</p>
            <h5>
              <FaTruck /> Warehouse Location
            </h5>
            <p>184, Buthgamuwa Road Rajagiriya, Sri Lanka</p>
          </Grid>
        </Grid>
        <Grid container>
          <Grid
            item
            xs={12}
            sm={12}
            md={12}
            lg={12}
            className="footer__copyright"
          >
            © Copyright {new Date().getFullYear()} Gunda Power. All Rights
            Reserved.
            <a href="https://www.stem.lk" target="blank">
              Designed by Stem.lk
              <img className="footer__nglogo" src={nglogo} alt="nugoo" />
            </a>
          </Grid>
        </Grid>
      </footer>
    )
  }
}

应该显示输入，但实际上不是。在开发，捆绑以及快速部署方面工作良好。因此，我认为这与netlify的表单处理男孩有关。任何想法将不胜感激。

Answer 1

添加标签可解决此问题！

天哪。

"__toString()