Не удается отобразить одностраничные данные из списка в приложении реагирования с использованием маршрутизатора и WordPress API - PullRequest
Новая
       7

Не удается отобразить одностраничные данные из списка в приложении реагирования с использованием маршрутизатора и WordPress API

0 голосов
/ 04 октября 2019

Я довольно новичок в этом, поэтому заранее извиняюсь, если я тупой. Я строю приложение реагирования поверх API отдыха WordPress. Я пытаюсь сделать что-то довольно простое, а именно создать компонент, показывающий список страниц, каждая со ссылкой, которая выводит пользователя в новое представление, показывающее отдельную «страницу» со всеми данными для этой страницы.

Я почти на месте, но у меня возникают проблемы с выводом правильных данных на отдельных страницах.

Я выбрал подход, чтобы взять идентификатор из match.params и затем сопоставить его со страницейid передается через реквизит с использованием JavaScript 'find'. Этот вид работ. Я могу консоль записывать данные для отдельной страницы изнутри метода 'getPage' в компоненте PageSingle, если я вызываю его в методе рендеринга, но в тот момент, когда я пытаюсь получить доступ к любым отдельным значениям, таким как идентификатор, который я получаю, старый не удается прочитатьсвойство '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
}

Реквизиты отправляются на одну страницу с помощью Browser Router. Сами маршруты определены в компоненте 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 } /> }
/>

Очевидно, конечная цель состоит в том, чтобы в конечном итоге отобразить соответствующие данные с помощью метода рендеринга, но на самом деле мне нужнополучить доступ к этим данным, прежде чем я смогу сделать это. Это, наверное, что-то действительно основное, что я просто не понимаю. Любые указатели в правильном направлении будут высоко оценены.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 08 октября 2019

Хорошо, для всех, кто заинтересовался, ответ заключался в том, что массив с объектом внутри него возвращался в PageSingle.js.

Поэтому ответ лежит в граббине g правильной страницы с 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>
    )

Должен быть менее запутанный способ сделать это, хотя, любые предложения, пожалуйста, дайте мне знать.

0 голосов
/ 04 октября 2019

Если у вас есть правильные данные в вашем console.log, то я думаю, что это потому, что console.log выполняется после небольшой задержки, попробуйте сделать это и посмотрите, если вы получите свойство 

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

 }, 100);

, как правило, ключидобавляются после вызова console.log

Надеюсь, это поможет

...