无法使用路由器和 WordPress API 从列表中渲染出单页数据

Question

I'm pretty new to this so apologies in advance if I'm being dumb. I'm building a react application on top of the WordPress rest API. I'm trying to do something pretty basic which is to create a component showing a list of pages, each with a link which takes the user to a new view showing the individual 'page' with all the data for that page.

I'm almost there but am having problems outputting the correct data on the individual pages.

The approach I've taken is to take the id from match.params and then match it up with the page id passed down through props using javascript 'find'. This kind of works. I can console log the data for the individual page out from inside the 'getPage' method in the PageSingle component if I call it in the render method but the moment I try to access any individual values such as the id I get the old Cannot read property 'id' of undefined.

Probably not very clearly explained so please see code below:

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 shown in console when it works – I've removed some so as not to take up too much space but you get the idea

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

The props are sent to page single using Browser Router. The routes themselves are defined in the App.js component and look like this. Not sure if this is relevant or not, probably not.: Routes

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

Obviously, the end goal is to eventually display the relevant data via the render method but I actually need to access that data before I can do that. It's probably something really basic that I'm just not understanding. Any pointers in the right direction would be much appreciated.

Thanks.

Answer 1

If you have the correct data in your console.log then I think this is because console.log executes after a small delay, Try doing this and see if you get the property

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

 }, 100);

usually keys are added after the console.log call

Hope it helps

Answer 2

Okay, for anyone interested, the answer lay in the fact that an array with an object inside of it was being returned in PageSingle.js.

The answer therefore lay in grabbin gthe correct page with an if statement and pushing the required values to an array and then accessing that with bracket notation:

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

Got to be a less convoluted way of doing this though so, any suggestions please let me know.