Question

在地图中使用地图生成jsx内容会引发错误

var exampleData = [
    { name: "Alex", age: 13, date: new Date()},
    { name: "Dominic", age: 313, date: new Date()},
    { name: "Fiona", age: 33, date: new Date()}
]

var tableContent = 
  <div>
    {exampleData.map((element,index) => { 
        return(
          <tr>
            <th scope="row">{index}</th> 
            {Object.keys(element).map((key)=>{ 
              return(
                <tr scope="row">{element[key]}</tr>
              )}
            }
           </tr>
        )
       })
     }
  </div>

反应引发错误：对象作为React子对象无效。如果您打算呈现子级集合，请改用数组

在那种情况下，请确保我不能使用第二张地图并手动编写代码，但是我有数十种不同类型的数据要显示，并且有很多可以在开发中随时更改的键。有什么建议可以动态地进行吗？

Answer 1

您在正确的轨道上。

这是我使用的：

function toString(object) {
    if (typeof object === "string") return object;
    if (typeof object === "number") return object;
    if (typeof object === "boolean") return object ? "True" : "False";
    if (object === null || object === undefined) return "N/A";
    if (typeof object === "function") return "Function";
    if (object instanceof Date) return object.toLocaleString();
    if (object.hasOwnProperty("toString")) return object.toString();
    return JSON.stringify(object);
}

function TableView(props) {
    if (props.object.length < 1) return null;

    let keys = Object.keys(props.object[0]);

    return <table>
        <thead>
            <tr>
                {keys.map((key, i) => <td key={i}>{key}</td>)}
            </tr>
        </thead>
        <tbody>
            {props.object.map((row, i) => <tr key={i}>
                {keys.map((key, i) => <td key={key}>{toString(row[key])}</td>)}
            </tr>)}
        </tbody>
    </table>
}

例如：

let exampleData = [
    { name: "Alex", age: 13, date: new Date() },
    { name: "Dominic", age: 313, date: new Date() },
    { name: "Fiona", age: 33, date: new Date() }
]

<TableView object={exampleData} />

产生：

Answer 2

您的问题是呈现JS日期时。在示例数据中，您使用new Date()创建了一个日期，该日期的确返回了JS Date对象。为了呈现日期，只需将其转换为字符串格式即可。

const tableContent = 
  <div>
    {exampleData.map((element,index) => { 
        return(
          <tr>
            <th scope="row">{index}</th> 
            {Object.keys(element).map((key)=>{
              const el = element[key]
              return(<tr scope="row">{el instanceof Date ? el.toUTCString() : el}</tr>)
             }
            }
           </tr>
        )
       })
     }
  </div>

您可能还需要检查表格的格式。这是一个有效的小提琴：LINK

如何从对象数组动态创建jsx表？

2 个答案: