时间戳

首页 > 解决方案 > json渲染问题使用react生成表单字段？

javascript - json渲染问题使用react生成表单字段？

问题描述

我已经创建了一个像这样的静态表单（在 test.js 文件中）。

<form onSubmit={handleSubmit} noValidate>
              <Field
                component={TextField}
                variant="outlined"
                name="remarks"
                placeholder="Please enter remarks."
                label="Remarks"
              />

上述方法工作正常。但现在我想使用 json.Mean 创建相同的东西解析 json 并呈现表单。

这是我的逻辑

const getField = function(item) {
    // for (let i = 0; i < jsonArray.length; i++) {
    const { type } = item;
    console.log(type, "type", TEXTFIELD);
    switch (type) {
      case TEXTFIELD:
        return (
          <Field
            component={TextField}
            multiline
            rows="4"
            variant="outlined"
            name="remarks"
            placeholder="Please enter remarks."
            label="Remarks"
          />
        );
    }
  };

但它没有返回任何东西，为什么？？？

我想解析 json 并获得相同的形式。这是我的代码 https://codesandbox.io/s/objective-chaplygin-c4k06

{RESCHEDULE_FORM.map(i => {
                {
                  getField(i);
                }
              })}

标签： javascriptreactjs

解决方案

每当您使用地图时，不要忘记从中返回一个值。

{RESCHEDULE_FORM.map(i => {
   {
     return getField(i);
   }
 })}

或者你可以说

{RESCHEDULE_FORM.map(i =>  getField(i) )}

箭头函数在不带任何括号的情况下使用意味着返回。因此，您从 getField 返回的任何内容都将被返回。

推荐阅读