React从WordPress API渲染独立页面时数据传递失败排查

嘿，我帮你梳理了代码里的问题，核心是你的路由重复定义和数据传递依赖单一入口导致的，直接访问详情页或者刷新时就会出现undefined错误，具体问题和修复步骤如下：

核心问题拆解 #

1. 路由重复 + 直接访问详情页无数据 #

你在App.js里已经定义了/news/:articleSlug的路由，但又在Articles.js的每篇文章循环里重复加了同样的Route。这不仅会导致路由匹配混乱，更关键的是：当用户直接在地址栏输入详情页URL或者刷新页面时，Articles组件根本不会挂载，自然没有data传递给Article，所以data是undefined，触发了默认的错误提示。

2. Articles组件的状态逻辑位置错误 #

你把加载/错误判断放在了map循环内部，这会导致每一条文章都渲染一次加载/错误提示，而且当newsData为空时，循环根本不会执行，加载状态也不会显示出来。

一步步修复 #

第一步：删掉Articles里的重复Route #

打开Articles.js，把循环里的<Route path={/news/:articleSlug} ... />删掉，只保留App.js里的全局路由就够了。

第二步：让Article组件自己拿数据 #

既然直接访问详情页时没法从Articles拿到数据，那我们让Article组件独立根据slug去API请求对应文章，修改后的代码如下：

// Article.js
import React, { useState, useEffect } from 'react';

const Article = ({match}) => {
  const [articleData, setArticleData] = useState(null);
  const [requestFailed, setRequestFailed] = useState(false);
  // 从路由参数里取slug
  const slug = match.params.articleSlug;
  // WordPress API支持通过slug查询文章
  const newsURL = `http://myprivateblogapi.com/wp-json/wp/v2/posts?slug=${slug}&_embed`;

  useEffect(() => {
    fetch(newsURL)
      .then(response => {
        if(!response.ok) {
          throw Error("Network request failed.");
        }
        return response.json();
      })
      .then(data => {
        // WordPress返回的是匹配slug的数组，取第一个元素
        if(data.length > 0) {
          setArticleData(data[0]);
        } else {
          setRequestFailed(true);
        }
      })
      .catch(() => {
        setRequestFailed(true);
      });
  }, [slug]); // 当slug变化时重新请求

  // 处理无数据或请求失败的情况
  if(requestFailed || !articleData) {
    return <h2> Sorry. That article doesn't exist. </h2>;
  }

  return (
    <div>
      <h3> {articleData.title.rendered}</h3>
      <div dangerouslySetInnerHTML={{ __html: articleData.content.rendered }} />
      <hr />
    </div>
  )
}
export default Article;

第三步：修复Articles的状态逻辑 #

把加载和错误判断移到循环外面，避免每个文章都渲染一次提示，修改后的Articles.js：

// Articles.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom'; // 不用再导入Route了

const newsURL = "http://myprivateblogapi.com/wp-json/wp/v2/posts?_embed";

export default class Articles extends Component {
  constructor(props) {
    super(props);
    this.state = { newsData: [], requestFailed: false, loading: true }
  }

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

  render() {
    // 先处理加载和错误状态，放在循环外面
    if(this.state.loading) return <p>Loading...</p>;
    if(this.state.requestFailed) return <p>Failed to load articles!</p>;

    // 再渲染文章列表
    const articles = this.state.newsData.map((article, index) => (
      <div key={index} className="article-container">
        <div className="article-preview">
          <span className="article-date">{article.date}</span>
          <h5>{article.title.rendered}</h5>
          <div dangerouslySetInnerHTML={{ __html: article.excerpt.rendered }} />
          <Link to={`/news/${article.slug}`}>Read More...</Link>
        </div>
      </div>
    ));

    return (
      <div>
        <h3>All Articles from Blog</h3>
        {articles}
      </div>
    )
  }
}

第四步：修正App.js里的小问题 #

你在App.js里用了Category组件但没导入，要么补上导入，要么暂时注释掉这个路由：

// App.js
import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Articles from './Articles';
import Article from './Article';
// import Category from './Category'; // 补上这个导入，或者注释下面的Category路由

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="nav">
          <Link to="/">Home</Link>&nbsp;&nbsp;
          <Link to="/category">Category</Link>&nbsp;&nbsp;
          <Link to="/articles">Articles</Link>&nbsp;&nbsp;
        </div>
        <div>
          <Switch>
            <Route exact path={"/"} component={Home} />
            {/* <Route path={"/category"} component={Category} /> */}
            <Route path={"/articles"} component={Articles} />
            <Route path="/news/:articleSlug" component={Article} /> {/* 简化成component即可 */}
          </Switch>
        </div>
      </div>
    );
  }
}
export default App;

修复思路说明 #

• 让Article组件独立获取数据，不管是从列表页跳转还是直接访问详情页，都能正确拿到数据，彻底解决data为undefined的问题。
• 移除重复路由，避免路由匹配冲突。
• 调整状态逻辑位置，让加载和错误提示更合理，不会重复渲染。

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