继承Component的React类组件无法加载API动态内容问题咨询

安全阿岳

2026-10-6

问题原因与修复方案

你代码里的问题出在3个地方：

类组件的所有外部传入属性默认挂载在this.props对象上，不需要像函数组件一样在定义时解构参数
你在getStaticProps里返回的属性是post，要通过this.props.post才能拿到对应值，不能直接访问posts变量
构造函数的第一个参数是固定的props对象，不能自定义命名为posts；另外调用renderTitle方法要加括号才能执行返回DOM元素

修正后完整代码

import { Component } from 'react'
// 请自行引入你代码中用到的SampleNextArrow、SamplePrevArrow组件

export default class BlogPost extends Component {
  constructor(props) {
    super(props);
    this.renderTitle = this.renderTitle.bind(this);
  }

  renderTitle() {
    return <div>{this.props.post.Title}</div>;
  }

  render() {
    const settings = {
      dots: true,
      infinite: false,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true,
          },
        },
      ],
    };

    return (
      <>
          <div>
            {this.renderTitle()}
          </div>
      </>
    );
  }
}

// 生成所有静态页面路径
export async function getStaticPaths() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  const paths = posts.map((blog) => ({
    params: { id: blog.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

// 拉取单页对应数据
export async function getStaticProps({ params }) {
  const { id } = params;

  const res = await fetch(`http://localhost:1337/blogs?id=${id}`);
  const data = await res.json();
  const post = data[0];

  return {
    props: { post },
  };
}