React.js中遍历Django REST API返回JSON数据的渲染问题求助

我来帮你梳理下问题，然后给出正确的实现方式：

首先修正数据获取的问题 #

你在componentDidMount里把posts设为了data.data[0]，这只会拿到单个帖子对象，而不是整个帖子数组，后面遍历的时候this.state.posts.length肯定会出错。应该改成把整个数组存到state里：

async componentDidMount() { 
  try {
    const response = await fetch('/api/Post'); 
    const data = await response.json(); 
    // 假设data.data是帖子数组，直接赋值给posts
    this.setState({ posts: data.data, loading: false }); 
  } catch (err) {
    console.error('获取数据失败:', err);
    this.setState({ loading: false });
  }
}

用React推荐的map方法遍历渲染 #

React里遍历数组渲染元素最常用的是Array.prototype.map，比for循环更简洁符合React的写法。另外要注意：

• 每个渲染的元素必须加唯一的key属性（用帖子的id就很合适）
• JSX里的class要写成className（React的语法要求）

方案1：直接在render里写map逻辑

如果不需要单独抽成函数，直接在render里处理最直观：

class PostList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      loading: true
    };
  }

  async componentDidMount() { 
    try {
      const response = await fetch('/api/Post'); 
      const data = await response.json(); 
      this.setState({ posts: data.data, loading: false }); 
    } catch (err) {
      console.error('获取数据失败:', err);
      this.setState({ loading: false });
    }
  }

  render() {
    const { posts, loading } = this.state;

    if (loading) {
      return <div>加载中...</div>;
    }

    if (posts.length === 0) {
      return <div>暂无帖子</div>;
    }

    return (
      <div className="row">
        {posts.map(post => (
          <div 
            key={post.id} // 用帖子的唯一id作为key
            className="col-md-6 col-6 paddding animate-box" 
            data-animate-effect="fadeIn"
          > 
            <div className="fh5co_suceefh5co_height_2">
              <img src={post.image} alt={post.title} /> 
              <div className="fh5co_suceefh5co_height_position_absolute"></div> 
              <div className="fh5co_suceefh5co_height_position_absolute_font_2"> 
                <div className="">
                  <a href="#" className="color_fff"> 
                    <i className="fa fa-clock-o"></i>&nbsp;&nbsp;{post.date_posted} 
                  </a>
                </div> 
                <div className="">
                  <a href={`/single/${post.id}`} className="fh5co_good_font_2"> 
                    {post.title} 
                  </a>
                </div> 
              </div> 
            </div> 
          </div>
        ))}
      </div>
    );
  }
}

方案2：抽成单独的渲染函数（如果逻辑复杂）

如果你想把渲染单个帖子的逻辑抽出来，也可以写成一个函数，注意要确保函数内部能访问到this.state，可以用箭头函数或者bind：

class PostList extends React.Component {
  // ... 构造函数和componentDidMount和上面一样

  renderPost = (post) => {
    return (
      <div 
        key={post.id}
        className="col-md-6 col-6 paddding animate-box" 
        data-animate-effect="fadeIn"
      > 
        <div className="fh5co_suceefh5co_height_2">
          <img src={post.image} alt={post.title} /> 
          <div className="fh5co_suceefh5co_height_position_absolute"></div> 
          <div className="fh5co_suceefh5co_height_position_absolute_font_2"> 
            <div className="">
              <a href="#" className="color_fff"> 
                <i className="fa fa-clock-o"></i>&nbsp;&nbsp;{post.date_posted} 
              </a>
            </div> 
            <div className="">
              <a href={`/single/${post.id}`} className="fh5co_good_font_2"> 
                {post.title} 
              </a>
            </div> 
          </div> 
        </div> 
      </div>
    );
  }

  render() {
    const { posts, loading } = this.state;

    if (loading) {
      return <div>加载中...</div>;
    }

    if (posts.length === 0) {
      return <div>暂无帖子</div>;
    }

    return (
      <div className="row">
        {posts.map(this.renderPost)}
      </div>
    );
  }
}

你之前代码的几个错误点 #

1. state赋值错误：把data.data[0]（单个对象）赋值给posts，导致后面遍历的时候length属性不存在
2. JSX语法错误：在Post组件标签里直接嵌套div，正确的写法应该是把div作为Post的children（如果Post是自定义组件），或者直接渲染div不需要Post组件
3. class属性错误：React里要用className代替class，否则会报错
4. key的取值问题：如果你的帖子id是直接的数值/字符串，应该用post.id而不是post.id.value（除非你的API返回的id是嵌套对象）

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