导航离开组件时无法读取未定义的属性“x”

Question

我的应用结构是这样的：

主页（应用程序启动的位置）

新闻页面 - 调用WordPress API生成在WP后端创建的所有不同文章的列表

文章页面 - 根据URL的slug动态呈现，以查询正确文章的数据

当我离开文章页面（到新闻页面或主页，或其他方式）时，我一直收到与文章页面组件相关的未定义错误。当我刷新我导航到的页面时，数据加载没有任何问题。这让我相信，即使在远离组件的情况下，文章页面组件仍然以某种方式呈现。如何防止这种情况发生以避免未定义的错误？

ArticlePage.js

import React, { Component } from 'react';

export default class Article extends Component {

  constructor() {
    super();

    this.state = {
      news_articles: [],
      isLoading: true,
      requestFailed: false
    }
  }

  componentDidMount() {
    let newsPath = window.location.pathname;

    // cuts out url before slug
    let newsVariable = newsPath.slice(14);
    let newsURL = `http://myprivateblogapi.com/wp-json/wp/v2/posts/?slug=${newsVariable}`;

    // all data
    fetch(newsURL)
    .then(response => {
      if(!response.ok) {
        throw Error("Network request failed."); }
          return response.json() })
          .then(d => {
            this.setState({ news_articles:d, isLoading: false }) })
            .catch(() => { 
              this.setState({ requestFailed: true 
              }) 
            }); 
  }

  componentWillReceiveProps() {
    let newsPath = window.location.pathname;

    // cuts out url before slug
    let newsVariable = newsPath.slice(14);
    let newsURL = `http://myprivateblogapi.com/wp-json/wp/v2/posts/?slug=${newsVariable}`;

    // all data
    fetch(newsURL)
    .then(response => {
      if(!response.ok) {
        throw Error("Network request failed."); }
          return response.json() })
          .then(d => {
            this.setState({ news_articles:d, isLoading: false }) })
            .catch(() => { 
              this.setState({ requestFailed: true 
              }) 
            }); 
        }

  render() {

    if(this.state.isLoading) return <div className="light-spinner"><span><i className="fas fa-spinner fa-pulse fa-3x"></i></span></div>
    let article_details = this.state.news_articles[0];


  return (

    <div className="full-article--cntr news-article--cntr">

<div className="full-article--full-herospace-cntr">
        <div className="full-article--herospace news-article--herospace icon-page--herospace" 
        style = {
          ( article_details.acf.article_featured_image ) ? 
            ( {backgroundImage: `url(${article_details.acf.article_featured_image})`} ) :
            ( { backgroundColor: "brown" } )
        }>

          <div className="full-article--herospace_text">
          <div className="post-type">
            <div className="red-bar red-bar--above-news"></div>
            <span className="post-type--title">news</span>
          </div>

            <div className="full-article--herospace-info">
              <h1 dangerouslySetInnerHTML={{ __html: article_details.title.rendered }}></h1>
            </div>
          </div>
          </div>
          <div className="full-article--herospace_overlay">
        </div>
        </div>

        <div className="full-article--content-cntr news-article--content-cntr above-post-it">
          <div className="full-article--content news-article--content">
              <div className="full-article--main" dangerouslySetInnerHTML={{ __html: article_details.content.rendered }} />
              <div className="full-article--meta">
                {/* <div className="author-icon"><img src={article_details._embedded.author['0'].avatar_urls['96']} /></div> */}
                <div className="posted-by"><span>Posted by <span className="red">{article_details.author}</span></span></div>
                <div className="posted-on"><span>{new Date(article_details.date).toString()}</span></div>
              </div>
              </div>
        </div>

    </div>
    )
  }
}