Gutenberg withAPIData HOC页面重载无法获取数据，始终处于加载状态

这种情况我在开发自定义区块时碰到过好几次，结合你给出的状态信息（isLoading: true且请求路径是/wp/v2/posts?per_page=4），大概率是请求验证、数据存储或组件逻辑的问题，给你几个排查方向：

1. 确认是否使用WordPress官方的apiFetch方法 #

如果你的区块是用原生fetch发起API请求的，在后台编辑页面会因为缺少nonce验证导致请求被拦截（返回403），但很多时候不会直接抛出错误，而是让请求处于挂起状态，表现为一直loading。

解决方法：替换成Gutenberg提供的apiFetch，它会自动带上必要的验证头：

import { apiFetch } from '@wordpress/data-controls';

// 示例：用apiFetch获取帖子
function* fetchPosts() {
  try {
    const posts = yield apiFetch({ path: '/wp/v2/posts?per_page=4' });
    return posts;
  } catch (error) {
    console.error('请求帖子失败:', error);
    return [];
  }
}

2. 检查区块属性的存储与加载逻辑 #

如果你的区块是直接保存了API返回的帖子数据（而不是仅保存筛选条件/ID），重新加载时可能因为数据格式不匹配，导致重新请求的逻辑没有正确触发，或者请求参数丢失。

建议：

• 只在区块属性中存储必要的筛选参数（比如perPage: 4），而不是整个帖子对象；
• 加载区块时，根据存储的参数重新发起API请求，而不是依赖保存的旧数据；
• 确保区块属性的source定义正确，比如用source: 'attribute'存储简单数值，避免自定义source的序列化错误。

3. 排查组件的请求触发时机与错误处理 #

看看你的组件是不是只处理了isLoading状态，却没有处理请求失败的情况，导致请求出错后一直卡在loading状态：

// 正确做法：同时监听error状态
const { posts, isLoading, isError } = useSelect( select => {
  const { getPosts, getPostsError } = select('your-block-namespace');
  return {
    posts: getPosts(),
    isLoading: select('core/data').isResolving('your-block-namespace', 'getPosts'),
    isError: !!getPostsError(),
  };
}, []);

// 组件渲染时处理错误
if (isError) {
  return <div>加载失败，请检查API配置</div>;
}

另外，检查useEffect或数据请求的依赖项是否正确：如果依赖项设置不当，可能导致请求没有在组件挂载时触发，或者重复触发。

4. 查看浏览器Network面板的请求详情 #

打开浏览器开发者工具的Network标签，找到/wp/v2/posts?per_page=4这个请求，查看它的状态码：

• 如果是403 Forbidden：回到第一步，确认用了apiFetch，或者手动添加X-WP-Nonce头（可以通过wpApiSettings.nonce获取）；
• 如果是404 Not Found：检查REST API路径是否正确，比如是否启用了帖子的REST端点（默认是启用的，但如果有插件禁用了需要开启）；
• 如果是pending：检查是否有其他代码拦截了请求，或者服务器端响应缓慢。

5. 确认数据存储的正确性 #

进入数据库，查看对应文章的post_content字段，检查你的区块数据是否正确保存。如果区块的属性没有正确序列化，加载时可能无法解析，导致请求逻辑异常。

比如，正确的区块数据应该是类似这样的JSON结构：

<!-- wp:your-block/your-post-list {"perPage":4} /-->

如果保存的数据格式混乱，说明区块的save函数有问题，需要调整save组件的逻辑，确保只存储必要的属性。

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