Reactjs amp表单未提交表单数据

我有一个表单的用例，该表单具有从后端读取json的自动完成功能，并且表单中还有一组从状态读取的输入字段。我正试图使页面按如下方式工作： 1-用户在自动完成内单击 2-用户类型文本 3-用户选择项目 4-单击后，整个表单将提交到后端 5-用户被重定向到相应的页面

以下是我当前的amp代码：

                                    <form
                                            className="amp-search-areas-form"
                                            method="post"
                                            // action-xhr={`${hostName}/api/areas`}
                                            action-xhr="https://url/api/areas"
                                            target="_top"
                                            id="searchform"
                                            dir="rtl"
                                        >
                                            <div
                                                style={{
                                                    fontSize: 'large',
                                                    fontWeight: '600',
                                                    cursor: 'pointer',
                                                    paddingBottom: '10px',
                                                    textAlign: 'right',
                                                }}
                                            >
enter area name
                                            </div>
                                            <amp-autocomplete
                                                filter="substring"
                                                filter-value="name"
                                                // src={`${hostName}/api/areas`}
                                                src="https://url/api/areas"
                                                on="select:AMP.setState({ defaultState: { area: event.value }}), searchform.submit"
                                                query="name"
                                                submit-on-enter="true"
                                                highlight-user-entry="true"
                                                items="items"
                                                // on="change:searchform.submit" //triggers submit on select
                                                // on="tap:search-lightbox.close,AMP.setState({ fullScreenLightBox: ['banner-search-panel'] })" //should close on change
                                            >
                                                <input
                                                    dir="rtl"
                                                    type="search"
                                                    name="selectedArea"
                                                    role="areasearch"
                                                    tabIndex="3"
                                                    className="amp-search-areas-input"
                                                    placeholder="placeholder"
                                                />
                                                <AmpMustache
                                                    template={`
                                                            <div data-value="{{name}}">
                                                                <div>{{ name }}</div>
                                                            </div>`}
                                                />
                                            </amp-autocomplete>
                                            <input
                                                name="typeField"
                                                type="text"
                                                // hidden
                                                data-amp-bind-value="defaultState.type"
                                            ></input>
                                            <input
                                                name="catField"
                                                type="text"
                                                // hidden
                                                data-amp-bind-value="defaultState.cat"
                                            ></input>
                                            <input
                                                name="areaField"
                                                type="text"
                                                // hidden
                                                data-amp-bind-value="defaultState.area"
                                            ></input>
                                        </form>

我的express配置：

server.use(bodyParser.urlencoded({ extended: true }));
  server.use(bodyParser.json()); 

---

好的，我通过将默认编码类型更改为application/x-www-form-urlencoded解决了这个问题

所以我的表格现在看起来像这样：

 <form
      className="amp-search-areas-form"
     method="post"
    action-xhr="url/api/areas"
     target="_top"
     id="searchform"
     dir="rtl"
     encType="application/x-www-form-urlencoded"> // this line here 
        .
        .
        .
        etc
  </form>

//这里是这一行
.
.
.
等

 <form
      className="amp-search-areas-form"
     method="post"
    action-xhr="url/api/areas"
     target="_top"
     id="searchform"
     dir="rtl"
     encType="application/x-www-form-urlencoded"> // this line here 
        .
        .
        .
        etc
  </form>