React JS中如何从外部API获取指定数量数据？代码无输出求助

你的代码存在的核心问题 #

• 未将获取的数据存入组件state：React依赖state变化触发视图更新，你当前仅获取了数据但未做状态存储，页面自然不会渲染内容
• 筛选逻辑错误：接口返回的是数组而非单个对象，json.userId根本不存在，且你的判断逻辑和“取15条数据”的需求完全不匹配
• 缺少错误处理：未捕获fetch请求可能出现的失败情况
• 无加载状态提示：用户无法感知数据是否在请求中

修正后的完整代码 #

import React, { Component } from 'react';

class PostList extends Component {
  constructor(props) {
    super(props);
    // 初始化组件状态
    this.state = {
      posts: [],
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts";
    fetch(url)
      .then((response) => {
        // 校验请求是否成功
        if (!response.ok) {
          throw new Error('请求数据失败');
        }
        return response.json();
      })
      .then((json) => {
        // 截取数组前15条数据
        const first15Posts = json.slice(0, 15);
        // 更新state触发视图渲染
        this.setState({
          posts: first15Posts,
          loading: false
        });
      })
      .catch((error) => {
        // 捕获并处理请求异常
        this.setState({
          error: error.message,
          loading: false
        });
      });
  }

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

    // 根据状态渲染对应内容
    if (loading) {
      return <div>加载中...</div>;
    }

    if (error) {
      return <div>错误：{error}</div>;
    }

    return (
      <div>
        <h2>15条帖子列表</h2>
        <ul>
          {posts.map(post => (
            <li key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default PostList;

关键修复说明 #

1. 状态管理：初始化posts存储数据、loading标记加载状态、error存储错误信息，让组件状态清晰可控
2. 请求校验：判断response.ok确保请求成功再解析数据，避免无效数据流入
3. 数据截取：用slice(0,15)直接获取数组前15条，精准匹配需求
4. 状态更新：调用setState将数据存入组件状态，触发React重新渲染页面
5. 异常处理：通过catch捕获请求失败场景，给用户明确的错误提示
6. 条件渲染：根据加载、错误、数据就绪三种状态分别展示对应内容，提升用户体验

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