Question

我对此很陌生，因此如果我很笨，请提前道歉。我正在WordPress rest API之上构建一个React应用程序。我正在尝试做一些非常基本的事情，即创建一个显示页面列表的组件，每个组件都有一个链接，该链接将用户带到一个新视图，该视图显示具有该页面的所有数据的单个“页面”。

我快到了，但是在各个页面上输出正确的数据时遇到了问题。

我采用的方法是从match.params中获取ID，然后将其与使用javascript“查找”通过道具传递的页面ID进行匹配。这种作品。如果我在render方法中调用它，则可以从PageSingle组件中的“ getPage”方法内部注销单个页面的数据，但是当我尝试访问任何单个值（例如id）时，我得到了旧的无法读取属性“ id”未定义。

可能解释得不太清楚，因此请参见下面的代码：

PageList.js

import React from 'react';
import { Link } from 'react-router-dom';

const PageList = (props) => {
        const pages = props.pages.map( (page) => {
            return (
                <div key={page.id}>
                    <Link to={`/pagelist/${page.id}`}>{page.title.rendered}</Link>
                </div>                  
            );
        });
        return <div className="page-list">{pages}</div>
};
export default PageList;

PageSingle.js

import React from 'react';
class PageSingle extends React.Component {
getPage = (props) => {
        let thePage =  props.pages.find(page => page.id === Number(props.match.params.pageId) );
        **console.log(thePage); // 1. this works
        console.log(thePage.id); // 2. this leads to error**
        return thePage;
    };
    render() {
        this.getPage(this.props);
        return (
            <h4>PageSingle</h4>
        )
    }
};
export default PageSingle;

JSON在其工作时显示在控制台中–我删除了一些内容，以免占用过多空间，但您明白了

{
content: {rendered: "Test Page 2 Text. Test Page 2 Text. Test Page 2 Text. Test Page 2 Text. Test Page 2 Text. ", protected: false}
date: "2019-09-30T13:38:47"
excerpt: {rendered: "Test Page 2 Text. Test Page 2 Text. Test Page 2 Text. Test Page 2 Text. Test Page 2 Text.", protected: false}
id: 14
link: "http://localhost/all_projects/wordpress/sites_main/my_projects/portfolio/wordpress/test-page-2/"
slug: "test-page-2"
status: "publish"
title: {rendered: "Test Page 2"}
type: "page"
__proto__: Object
}

使用浏览器路由器将道具发送到单个页面。路由本身在App.js组件中定义，如下所示。不知道这是否相关，可能不相关。：路线

<Route 
path="/pagelist" exact
render={ (props) => <PageList {...props} pages={ this.state.pages } /> }
/>
<Route exact 
path="/pagelist/:pageId" 
render={(props) => <PageSingle {...props} pages={ this.state.pages } /> }
/>

很显然，最终目标是最终通过render方法显示相关数据，但实际上我需要先访问该数据，然后才能执行此操作。我可能不了解，可能是非常基本的事情。任何朝着正确方向的指针将不胜感激。

谢谢。

Answer 1

如果console.log中有正确的数据，那么我认为这是因为console.log会在短暂的延迟后执行，尝试执行此操作，看看是否拥有该属性

setTimeout(function()
 {
   console.log(thePage.id)

 }, 100);

通常在console.log调用之后添加键

希望有帮助

Answer 2

好吧，对于任何有兴趣的人，答案都在于一个事实，即其中包含对象的数组已在PageSingle.js中返回。

因此，答案在于使用if语句将正确的页面抓取到正确的页面中，然后将所需的值压入数组，然后使用方括号表示法访问该值：

    let thisPage = [];

    props.pages.map((page) => {
        if (page.id === Number(props.match.params.pageId)) { 
            thisPage.push(page.id, page.title.rendered, page.content.rendered, page.featured_images);
        }
        return thisPage;
    })

    return (
        <div>
            <h4>{thisPage[1]}</h4>
            <p>{thisPage[2]}</p>
        </div>
    )

尽管这样做不太麻烦，但是任何建议请让我知道。

无法使用路由器和WordPress API从React应用程序中的列表中呈现单个页面数据

2 个答案: