React中解析响应JSON并提取raw字段值展示的方法

1. 先把JSON转成JS对象 #

首先确保你的接口响应已经被解析成JavaScript对象（比如用fetch的话，记得加.json()处理），别直接用字符串格式的JSON。

2. 直接嵌套访问raw字段 #

不用JSON.stringify，直接通过对象路径拿到raw值就行，以下是具体代码示例：

函数组件写法（React主流用法）

import { useState, useEffect } from 'react';

function RawValueShow() {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    // 替换成你的实际接口请求逻辑
    const getApiData = async () => {
      const res = await fetch('/your-api-url');
      const data = await res.json();
      setApiData(data);
    };
    getApiData();
  }, []);

  // 加载状态处理
  if (!apiData) {
    return <div>加载中...</div>;
  }

  return (
    <div className="raw-values">
      <h3>提取的原始值</h3>
      <p>第一个值：{apiData.values.first.raw}</p>
      <p>第二个值：{apiData.values.second.raw}</p>
    </div>
  );
}

export default RawValueShow;

类组件写法（兼容旧项目）

import React, { Component } from 'react';

class RawValueShow extends Component {
  state = { apiData: null };

  componentDidMount() {
    fetch('/your-api-url')
      .then(res => res.json())
      .then(data => this.setState({ apiData: data }));
  }

  render() {
    const { apiData } = this.state;
    if (!apiData) return <div>加载中...</div>;

    return (
      <div className="raw-values">
        <h3>提取的原始值</h3>
        <p>第一个值：{apiData.values.first.raw}</p>
        <p>第二个值：{apiData.values.second.raw}</p>
      </div>
    );
  }
}

export default RawValueShow;

3. 防报错处理（可选） #

如果接口可能返回缺失字段，用可选链操作符?.避免页面崩溃：

<p>第一个值：{apiData.values?.first?.raw || '暂无数据'}</p>
<p>第二个值：{apiData.values?.second?.raw || '暂无数据'}</p>

4. 批量遍历展示（如果子对象多的话） #

要是values下面还有更多子对象，直接遍历更高效：

<div className="raw-values">
  <h3>所有原始值</h3>
  {Object.entries(apiData.values).map(([key, item]) => (
    <p key={key}>{key}：{item.raw || '暂无数据'}</p>
  ))}
</div>

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