使用 React、博客文章和 Wordpress 进行动态路由 API

Question

我尝试关注 this tutorial 以了解动态路由的工作原理。现在，我不想使用静态数据，而是想使用 WordPress 的 API 引入博客 post，为每个 post 生成唯一的 link。我能够生成 link，但数据的 none 正在新页面上生成。我在这里做错了什么？

Articles.js（作为抓取所有博客 posts 的预览页面，按预期工作）

import React, { Component } from 'react';
import { Link, Route } from 'react-router-dom';
import Article from './Article';

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
    }   }

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

  render() {

    let articles = this.state.newsData.map((article, index) => {
      if(this.state.requestFailed) return <p>Failed!</p>
      if(!this.state.newsData) return <p>Loading...</p> 
      return(
        <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>
          <Route path={`/news/:articleSlug`}
          render={ (props) => <Article data={articles} {...props} />} />
        </div>

      )
    });

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

Article.js（渲染每篇文章）

import React from 'react';

const Article = ({match, data}) => {
  let article = data.find(a => a.slug == match.params.articleSlug);
  let articleData;

  if(article)
    articleData = <div>
      <h3> {article.title.rendered}</h3>
      { console.log(`${article.title.rendered}`) }
      <p>{article.content.rendered}</p>
      { console.log(`${article.content.rendered}`) }
      <hr />
    </div>
  else 
    articleData = <h2> Sorry. That article doesn't exist. </h2>;

    return (
      <div>
        <div>
          {articleData}
        </div>
      </div>
    )
}

export default Article;

Answer 1

我认为问题出在这里：

render={ (props) => <Article data={articles} {...props} />} />

并且在文章中你存储的是地图的结果，所以它不会有你期望的数据：

let articles = this.state.newsData.map(....)

解决方案：

1- 如果你想传递完整的数组然后这样写（不是一个好主意）：

render={ props => <Article data={this.state.newsData} {...props} />} />

2- 传递单个对象，在 Article 组件内不需要循环：

render={ props => <Article data={article} {...props} />} />

和Article分量：

const Article = ({match, data}) => {
  let articleData;

  if(data)
    articleData = <div>
      <h3> {article.title.rendered}</h3>
      <p>{article.content.rendered}</p>
      <hr />
    </div>

  else 
    articleData = <h2> Sorry. That article doesn't exist. </h2>;

    return (
      <div>
        <div>
          {articleData}
        </div>
      </div>
    )
}

使用 React、博客文章和 Wordpress 进行动态路由 API

Dynamic routing with React, Blog Posts and Wordpress API

javascript

reactjs

react-router

react-router-v4