在 React 中使用不同结构的键/值对渲染 JSON答案

【问题标题】：Rendering JSON in React with varying structure of the key/value pairs在 React 中使用不同结构的键/值对渲染 JSON
【发布时间】：2020-12-01 18:07:18
【问题描述】：

我有一个关于如何呈现来自 API 调用的 json 返回的问题，其中结果集在构造上有所不同。那么，如果您有 3 个 API 调用，并且每个调用都有不同的结构……假设一个包含 first_name 和 last_name，但第二个包含不同的内容，例如 date_time 和电子邮件地址，第三个不包含这些，但包含一个数组用户数？

如何编写一个 map 函数来迭代一个包含数据的状态对象，而这个状态对象包含许多不同的结构，并且您可以呈现键和值？

第一次通话

{
   "first_name": "foo",
   "last_name": "bar"
}

第二次通话

{
   "email": "foo@bar.com"
   "date": "some date"
}

第三次通话

{
   "first_name": "foo"
   "last_name": "bar"
   "users": [
       "user1",
       "user2",
       "user3"
   ]
}

当然，每个 api 调用都会将数据返回到this.state.searchData。寻找一种 DRY、优雅的方法来处理任何结构以呈现键/值对，而无需编写 3 种不同的方法来迭代结果。谢谢！

【问题讨论】：

这将取决于你将如何呈现你的结果......不知道那个......例子......你的users数组应该如何呈现
基本上我想首先在表格或 div 中呈现一些简单的东西......显示键“名字”等，然后显示值。我可能会在
- 结构中呈现用户，而其余的可能只是 div 等。

标签： javascript node.js reactjs ecmascript-6

【解决方案1】：

希望这能满足您的要求。

    <div>
        {
            Object.entries(this.state.searchData).map(([key, value]) => (
                <ul>
                    <li>{key}</li>
                    <li>{
                        (
                            Array.isArray(value)) && (
                            value.map(element => {
                                <li>{element}</li>
                            })
                        ) || (<li>{value}</li>)
                    }</li>
                </ul>
            )
            )
        }
    </div>

【讨论】：

【解决方案2】：

我可能会这样做开始：

return (
    <table>
        <thead>
            <tr>
                <th>Key</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
        {Object.entries(data).map(([key, value]) => (
             <tr>
                 <td>{key}</td>
                 <td>
                     {Array.isArray(value) ? (
                     <ul>
                         {value.map(v => <li>{v}</li>}
                     </ul>
                     ) : value}
                 </td>
             </tr>
        )}
        </tbody>
    </table>
);

【讨论】：

这也是一个很好的例子。谢谢你们俩！非常感谢。