在Gatsby/React中获取JSON子节点并去除外层value节点的方法

1. 在gatsby-node.js中提取真实数据 #

你的API返回结果里，每条博客数据都嵌套在value数组中，需要先剥离这层外层结构，再传递给组件。有两种处理方式：

方式一：修改请求函数直接提取数据 #

在getBlogsData中，请求返回后直接取出value数组里的目标对象（假设每个value数组只有一个元素）：

const getBlogs = endpoint => axios.get(`https://example.com/data-api/rest/blogs${endpoint}`);

const getBlogsData = ids =>
  Promise.all(
    ids.map(async id => {
      const { data: blogs } = await getBlogs(`/glogs/${id}`);
      // 提取value数组中的第一个对象
      return blogs.value[0];
    })
  );

exports.createPages = async ({ actions: { createPage } }) => {
  const allBlogs = await getBlogsData(['1', '2', '3', '4']);
  
  // 传递处理好的数据给组件
  createPage({
    path: '/blogs',
    component: require.resolve('./src/components/ListBlogsComp.jsx'),
    context: { allBlogs },
  });
};

方式二：获取数据后统一处理 #

如果不想修改请求函数，可在createPages中对返回的原始数据做批量处理：

exports.createPages = async ({ actions: { createPage } }) => {
  const rawBlogs = await getBlogsData(['1', '2', '3', '4']);
  // 遍历原始数据，提取每个item的value数组第一个元素
  const allBlogs = rawBlogs.map(item => item.value[0]);

  createPage({
    path: '/blogs',
    component: require.resolve('./src/components/ListBlogsComp.jsx'),
    context: { allBlogs },
  });
};

2. 修复组件中的错误并展示数据 #

你的组件存在变量名不匹配、拼写错误和HTML结构问题，修正后代码如下：

const ListBlogsComp = ({ pageContext: { allBlogs } }) => {
  return (
    <div style={{ width: 960, margin: '4rem auto' }}>
      <h1>ListBlogsComp</h1>
      {/* 必须用ul包裹li，符合HTML规范 */}
      <ul>
        {allBlogs.map(blog => (
          <li key={blog.id}>
            <h2>{blog.id}</h2>
            {/* 修正拼写错误：glog → blog */}
            <p>{blog.name}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ListBlogsComp;

关于数据类型的说明 #

不需要额外转换数据类型，axios会自动将API返回的JSON解析为JavaScript对象，直接提取嵌套的value内容即可使用。

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