映射函数未生成元素数组答案

【问题标题】：Map function is not generating a array of elements映射函数未生成元素数组
【发布时间】：2022-10-06 21:45:17
【问题描述】：

我有一个关于表单的对象数据数组：

const formFields = [
      {
        \"label\": \"Current Password\",
        \"type\": \"password\",
        \"name\": \"currentPassword\",
        \"placeholder\": \"Current Password\",
        \"required\": true
      },
      {
        \"label\": \"New Password\",
        \"type\": \"password\",
        \"name\": \"newPassword1\",
        \"placeholder\": \"New Password\",
        \"required\": true
      },
      {
        \"label\": \"Confirm New Password\",
        \"type\": \"password\",
        \"name\": \"newPassword2\",
        \"placeholder\": \"Confirm New Password\",
        \"required\": true
      },
    ]

我有使用数组的组件：

return (
        <Form> 
            {
                formFields.map(function(data) {
                    return 
                    <Form.Group className=\"mb-3\">
                        <Form.Label>{ data[\"label\"] }</Form.Label>
                        <Form.Control type={ data[\"type\"] } name={ data[\"name\"] } placeholder={ data[\"placeholder\"] }  required={ data[\"required\"] } />
                    </Form.Group>;
                }) 
            }
        
            <Button variant=\"primary\" type=\"submit\">
                Submit
            </Button>
        </Form>
    )

我在页面上看到的只是一个按钮。没有表单标签和表单域。假设 map 函数应该从对象数组formFields 创建一个元素数组。但是，它并没有这样做，并且其中的 return 语句的颜色是浅色的，就像它从未执行过一样。

因为如果 return 在它自己的行上，它会认为你想返回 undefined。所以你永远不会来到 Form.Group 部分
是 React 的东西还是 JavaScript 的东西？

标签： reactjs

【解决方案1】：

尝试将 map 函数的返回值括在括号中，或者将其与 <Form> 放在同一行，目前地图的每次迭代都返回 void，这不会导致任何渲染。

  return (
    <Form>
      {formFields.map(function (data) {
        return (
          <Form.Group className="mb-3">
            <Form.Label>{data["label"]}</Form.Label>
            <Form.Control
              type={data["type"]}
              name={data["name"]}
              placeholder={data["placeholder"]}
              required={data["required"]}
            />
          </Form.Group>
        );
      })}

      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );

【讨论】：

"return" 和 "(" 必须在同一行吗？

【解决方案2】：

这就是为什么在 JavaScript 中使用分号、圆括号和花括号，以及为什么你什么都看不到的原因；它是语言中丑陋的部分之一！这就是您的映射功能所做的：

formFields.map(function(data) {
  return   // i.e. the function returns undefined here
  // code below not evaluated
  <Form.Group className="mb-3">
    <Form.Label>{ data["label"] }</Form.Label>
    <Form.Control type={ data["type"] } name={ data["name"] } placeholder={ data["placeholder"] }  required={ data["required"] } />
  </Form.Group>;
});

将其更改为：

formFields.map(function(data) {
  return (
    <Form.Group className="mb-3">
      <Form.Label>{ data["label"] }</Form.Label>
      <Form.Control type={ data["type"] } name={ data["name"] } placeholder={ data["placeholder"] }  required={ data["required"] } />
    </Form.Group>
  );
})

或者，更好的是，使用箭头函数语法：

formFields.map(data => (
  <Form.Group className="mb-3">
    <Form.Label>{ data["label"] }</Form.Label>
    <Form.Control type={ data["type"] } name={ data["name"] } placeholder={ data["placeholder"] }  required={ data["required"] } />
  </Form.Group>
))

【讨论】：