Javascript 如何在React中呈现窗体？

我正在尝试在React中制作一个表单，我对它非常陌生，我正在合并我所观看的两个教程。 然而，当我尝试创建一个表单时，它没有出现

formField.js

：

export default [
{ label: 'Title', name: 'contactTitle' },
{ label: 'First Name', name: 'contactName' },
{ label: 'Last Name', name: 'contactLastName' },
{ label: 'Email', name: 'contactEmail' },
{ label: 'Telephone', name: 'contactTelephone' },
{ label: 'Address', name: 'contactAddress' },
];

然后我有一个

ContactField.js

，其中我制作了一个表单字段：

import React from 'react';

export default ({input, label, meta: {error, touched}}) => {
  return (
    <div>
      <label>{label}</label>
      <input {...input} style={{marginBottom: '5px'}} />
      <div className="red-text" style={{marginBottom: '20px'}}>
        {touched && error}
      </div>
    </div>
  )
}

在我的

行动中

我有：

export function createContact(values, callback) {
  const request = axios.post('/api/client', values)
    .then(() => callback());


  return {
    type: CREATE_CONTACT,
    payload: request
  }
}

---

我不知道是否只有一个小错误没有呈现我的表单，或者全部都是错误的。控制台中没有任何错误。

您在

渲染字段上有语法错误。您没有从
map
返回创建的组件，并且您有一个额外的
（分号）位于
FormField
的末尾。请看一下如何使用
map
at

应该是这样的

renderFields() {
  return _.map(formField, ({ label, name }) => (
    <Field
      key={name}
      component={ContactField}
      type="text"
      label={label}
      name={name}
    />
  ));
}

renderFields（）{
return u.map（formField，（{label，name}）=>(
));
}
您在
renderFields
上有语法错误。您没有从
map
返回创建的组件，并且您有一个额外的
（分号）位于
FormField
的末尾。请看一下如何使用
map
at

应该是这样的

renderFields() {
  return _.map(formField, ({ label, name }) => (
    <Field
      key={name}
      component={ContactField}
      type="text"
      label={label}
      name={name}
    />
  ));
}

renderFields（）{
return u.map（formField，（{label，name}）=>(
));
}
非常感谢！我花了至少10分钟才意识到括号是不同的。我刚换了号码，电脑就显示了分号brackets@Al-乔希很高兴它成功了。如果你对语法有问题，也许你可以在Good spot@bennygenel上快速阅读！我建议使用eslint规则
array callback return
来帮助查找像这样的困难bug。再见，非常感谢！我花了至少10分钟才意识到括号是不同的。我刚换了号码，电脑就显示了分号brackets@Al-乔希很高兴它成功了。如果你对语法有问题，也许你可以在Good spot@bennygenel上快速阅读！我建议使用eslint规则
array callback return
来帮助查找像这样的困难bug。看见