React调用WP RestFul API报错及实现5分钟自动刷新需求

一、「Cannot read properties of undefined (reading 'data')」错误排查与修复 #

这个错误核心是你在尝试访问一个undefined对象的data属性，大概率是添加新博客后API返回结构变化、新博客数据格式异常，或是代码未处理错误分支导致的。

具体修复步骤： #

• 检查API返回结构：打开浏览器开发者工具Network面板，查看添加新博客后API的返回结果，确认是否存在data字段，有没有出现嵌套结构变更（比如原本是res.data，现在变成res.data.data，或是返回了{error: ...}这类错误格式）
• 添加空值保护：在取值前先判断对象是否存在，避免直接访问undefined的属性：

  // 错误写法（无保护）
  const blogList = response.data.list;
  
  // 修复后（可选链+默认值）
  const blogList = response?.data?.list || [];
  

• 完善错误捕获逻辑：API可能返回错误状态码（如400/500），但代码未处理错误分支，直接读取data会报错。要在请求中加入错误捕获：

  const fetchBlogs = async () => {
    try {
      const response = await axios.get('/api/blogs');
      // 确保response.data存在再赋值
      setBlogs(response?.data?.list || []);
    } catch (err) {
      console.error('获取博客失败:', err);
      setBlogs([]); // 出错时设置默认值，避免页面空白
    }
  };
  

• 校验新博客数据格式：确认新添加的博客是否符合后端字段规范，比如有没有缺失必填字段，导致后端返回的列表中某一项为undefined，进而引发渲染错误。

二、实现每5分钟自动调用API的功能 #

用setInterval配合React的useEffect实现，同时注意组件卸载时清除定时器，避免内存泄漏：

完整示例代码： #

import { useEffect, useState } from 'react';
import axios from 'axios';

function BlogList() {
  const [blogs, setBlogs] = useState([]);

  // 封装获取博客列表的函数
  const fetchBlogs = async () => {
    try {
      const response = await axios.get('/api/blogs');
      setBlogs(response?.data?.list || []);
    } catch (err) {
      console.error('获取博客列表失败:', err);
      setBlogs([]);
    }
  };

  useEffect(() => {
    // 页面加载时先调用一次
    fetchBlogs();

    // 设置定时器：每5分钟（300000毫秒）调用一次API
    const intervalId = setInterval(fetchBlogs, 300000);

    // 组件卸载时清除定时器
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div className="blog-list">
      {blogs.map(blog => (
        <div key={blog.id} className="blog-item">
          <h3>{blog.title}</h3>
          <p>{blog.content}</p>
        </div>
      ))}
    </div>
  );
}

export default BlogList;

额外注意： #

• 如果应用有登录状态，要确保定时器运行时用户仍处于登录状态，避免API返回401未授权错误
• 若后端有请求频率限制，需确认自动调用的频率不会触发限流规则

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