求助：离开文章页面时出现Cannot read property 'x' of undefined错误

嘿，我碰到过好几个类似WP API + 单页应用路由的问题，你描述的这个情况大概率是路由切换时文章页组件的异步操作没被清理，或者组件卸载后还在尝试访问已经不存在的状态/数据，咱们一步步拆解解决：

1. 异步请求在组件卸载后仍在执行 #

这是最常见的原因：当你从文章页跳去其他页面时，组件已经被卸载，但之前发起的WP文章查询请求可能还没完成。请求结束后，组件尝试更新状态或者访问article.x这类属性，可此时组件实例已经不存在，自然会抛出undefined错误。

解决方法： #

用AbortController给请求加个“取消开关”，组件卸载时直接终止未完成的请求：

// React函数组件示例
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';

function ArticlePage() {
  const { slug } = useParams();

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchArticle = async () => {
      try {
        const res = await fetch(`https://你的WP站点域名/wp-json/wp/v2/posts?slug=${slug}`, { signal });
        const articleData = await res.json();
        // 这里更新文章状态，比如setArticle(articleData[0])
      } catch (err) {
        // 忽略请求被取消的错误
        if (err.name !== 'AbortError') console.error('请求出错:', err);
      }
    };

    fetchArticle();
    // 组件卸载时取消请求
    return () => controller.abort();
  }, [slug]);

  // 渲染逻辑...
}

如果是类组件，可以用isMounted标记来判断组件是否还存活：

componentDidMount() {
  this.isMounted = true;
  fetch(`https://你的WP站点域名/wp-json/wp/v2/posts?slug=${this.props.match.params.slug}`)
    .then(res => res.json())
    .then(data => {
      // 只有组件还在挂载状态时才更新状态
      if (this.isMounted) this.setState({ article: data[0] });
    });
}

componentWillUnmount() {
  this.isMounted = false;
}

2. 路由切换时文章页状态未重置 #

如果你的文章数据存在全局状态（比如Redux、Context），或者组件复用了实例，跳走后残留的文章状态可能会被其他页面的逻辑误访问，导致报错。

解决方法： #

• 组件内部状态：在组件卸载时重置文章状态，比如在函数组件的useEffect清理函数里：

  useEffect(() => {
    // ...请求逻辑
    return () => {
      controller.abort();
      setArticle(null); // 重置文章状态
    };
  }, [slug]);
  

• 全局状态：监听路由变化，当离开文章页时清除对应状态：

  useEffect(() => {
    const unlisten = history.listen((location) => {
      // 判断当前路径不是文章页时，清除全局文章状态
      if (!location.pathname.startsWith('/article/')) {
        dispatch(clearArticleState()); // 你的全局状态清除action
      }
    });
    return () => unlisten();
  }, [dispatch, history]);
  

3. 残留的事件监听/定时器 #

如果文章页里设置了定时器、或者添加了全局事件监听（比如scroll、resize），组件卸载后这些监听还在运行，触发时会尝试访问已卸载组件的状态/属性，同样会抛出错误。

解决方法： #

组件卸载时务必清理这些监听和定时器：

useEffect(() => {
  const timer = setTimeout(() => {
    // 一些延迟操作
  }, 1000);
  const handleScroll = () => { /* 滚动监听逻辑 */ };
  
  window.addEventListener('scroll', handleScroll);
  
  // 清理函数：卸载时移除监听、清除定时器
  return () => {
    clearTimeout(timer);
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

先从异步请求的取消开始排查，这是这类问题的高发原因，再逐步检查状态重置和事件监听的清理，应该就能解决问题了。

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