React中展示JSON响应键值时出现[Object, Object]问题求助

你遇到的[Object, Object]问题，核心原因是**fieldData本身是一个对象**，直接调用toString()方法只会返回对象的默认字符串表示，根本没法把里面的键值对展示出来。下面给你具体的修复方案，还能实现你想要的“加粗键或值”的效果：

核心修复思路 #

我们需要遍历fieldData的键值对，而不是直接把它转成字符串。用Object.entries()方法可以把对象转换成[键, 值]的数组，然后逐个渲染这些键值对，再用<strong>标签实现加粗效果。

修正后的代码示例 #

dotesting = () => {
  // 取出state.data的所有值组成数组
  const dataEntries = Object.values(this.state.data);

  // 遍历每个数据项，生成对应的DOM元素
  const journalEntries = dataEntries.map((item, entryIndex) => {
    // 遍历当前item的fieldData键值对
    const fieldElements = Object.entries(item.fieldData).map(([key, value], fieldIndex) => (
      <div key={fieldIndex} style={{ margin: '4px 0' }}>
        {/* 这里把键加粗，你也可以改成把value包在<strong>里 */}
        <strong>{key}:</strong> {value}
      </div>
    ));

    return (
      <div key={entryIndex} style={{ border: '1px solid #eee', padding: '12px', margin: '8px 0' }}>
        <h3>数据项 {entryIndex + 1}</h3>
        {fieldElements}
      </div>
    );
  });

  return journalEntries;
};

额外优化：处理嵌套对象 #

如果你的fieldData里还有嵌套的对象（比如某个值也是对象），可以加个递归函数来处理，避免再次出现[Object, Object]：

// 递归渲染值，处理嵌套对象
const renderValue = (value) => {
  if (typeof value === 'object' && value !== null) {
    return Object.entries(value).map(([subKey, subValue], idx) => (
      <div key={idx} style={{ marginLeft: '16px' }}>
        <strong>{subKey}:</strong> {renderValue(subValue)}
      </div>
    ));
  }
  // 如果是字符串/数字等基础类型，直接返回
  return value;
};

// 然后在fieldElements里替换成：
<strong>{key}:</strong> {renderValue(value)}

注意事项 #

• React列表渲染需要唯一的key属性，示例里用了entryIndex和fieldIndex，如果你的数据里有唯一ID（比如每个数据项的id字段），最好用真实ID来代替索引，避免渲染性能问题。
• 样式部分可以根据你的需求调整，示例里用了内联样式，也可以换成CSS类名。

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