React Native中如何不指定键名直接展示JSON的所有值

核心调整思路 #

你之前的写法仅输出键名，是因为Object.keys(post)返回的是对象所有键名组成的数组，你只渲染了键名本身，要获取对应的值直接通过post[键名]访问即可。
另外需要注意两点：

• post初始值为null，请求未完成时直接调用Object.keys会触发报错，需要先做非空判断
• React 列表渲染需要为每一项指定唯一key属性，避免控制台警告

代码示例 #

仅输出所有值 #

{post && Object.keys(post).map(key => (
  <Text key={key}>{post[key]}</Text>
))}

同时输出键名和对应值（更易读） #

{post && Object.keys(post).map(key => (
  <Text key={key}>{`${key}: ${post[key]}`}</Text>
))}

快速格式化输出整个JSON（适合调试场景） #

如果不需要拆分渲染每一项，只想直接输出完整的结构化JSON内容，可以直接用JSON.stringify：

<Text>{JSON.stringify(post, null, 2)}</Text>

其中第三个参数2代表格式化缩进的空格数，可根据需要调整大小。

内容的提问来源于stack exchange，提问作者CODEforDREAM