Reactjs 反应不呈现多重'；输入'；DOM元素 import React，{Component}来自“React”； 进口{ 按钮 }从“反应带”； 进口{ 福米克， 形式， 领域 }来自“福米克”； 导出类UniversalInputForm扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 显示类别：错误， 分类医院：“请选择”， 初始值：{ 社会：{ facebook：“这是facebook字符串”， twitter：“这是twitter字符串”， }, textValue:“只是一个字符串值”， }, }; } render（）{ 常数{ socketMethod， emitSocketEvent， }=这是道具； 让inputFields=Object.entries（this.state.initialValues）.map( （项目，索引1）=>{ if（项目类型[1]=“对象”）{ //控制台日志（第[1]项）； Object.key（item[1]）.map（（itemChild，index2）=>{ if（项目[1][itemChild]=“字符串”的类型）{ 返回( ); } }); } if（项目类型[1]=“字符串”）{ 返回( ); } } ); 返回( { console.log（值）； }} > {inputFields} emitSocketEvent（socketMethod）} className=“mt-3 w-100” > 提交 ); } Console.log方法在项[1]==“string”的类型和 项目类型[1]=“对象” 尝试在中包装输入字段，并在之后直接显示 输入字段仅出现在项目[1]=“字符串”行的类型中

这是什么原因？

---

是不是React嵌套了输入，结果什么也没有显示？

object.map返回数组，即React节点[]，这很好

但是在另一个映射中有一个映射，这将使返回类型ReactNode[]

React无法分析多维数组，因此它不会呈现

试试这个

import React, { Component } from "react";
import {
  Button,
} from "reactstrap";

import {
  Formik,
  Form,
  Field,
} from "formik";

export class UniversalInputForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showCategories: false,
      categoryChosen: "Please choose",
      initialValues: {
        social: {
          facebook: "this is the facebook string",
          twitter: "this is the twitter string",
        },
        textValue: "Just a string value",
      },
    };
  }
  render() {
    const {
      socketMethod,
      emitSocketEvent,
    } = this.props;

let inputFields = Object.entries(this.state.initialValues).map(
  (item, index1) => {
    if (typeof item[1] === "object") {
      // console.log(item[1]);
      Object.keys(item[1]).map((itemChild, index2) => {
        if (typeof item[1][itemChild] === "string") {
          return (
          <Field name="test" placeholder="test" className="w-100" />
          );
        }
      });
    }
    if (typeof item[1] === "string") {
      return (
        <Field name={item[1]} placeholder={item[1]} className="w-100" />
      );
    }
  }
);

return (
  <div>
    <Formik
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      <Form>
     <React.Fragment>   {inputFields} </React.Fragment>
        <Button
          color="success"
          type="submit"
          onClick={() => emitSocketEvent(socketMethod)}
          className="mt-3 w-100"
        > 
          Submit
        </Button>
      </Form>
    </Formik>
  </div>
);
}

let inputFields=[]；
Object.values（this.state.initialValues）.map(
（项目，索引1）=>{
如果（项目类型==“对象”）{
Object.values（item.map）（itemChild，index2）=>{
if（typeof itemChild==“string”）{
inputFields.push(
);
}
});
}
如果（项目类型==“字符串”）{
inputFields.push(
);
}
}
);

返回对象。键（…

也会修复它，但是的。我在创建这些数组时也会添加

key

。

let inputFields = [];
Object.values(this.state.initialValues).map(
  (item, index1) => {
    if (typeof item === "object") {
      Object.values(item).map((itemChild, index2) => {
        if (typeof itemChild === "string") {
          inputFields.push(
          <Field name="test" placeholder="test" className="w-100" />
          );
        }
      });
    }
    if (typeof item === "string") {
      inputFields.push(
        <Field name={item} placeholder={item} className="w-100" />
      );
    }
  }
);