используя локальное обещание для реакции маршрутизатора 4 async getInitialProps - PullRequest
Новая
       31

используя локальное обещание для реакции маршрутизатора 4 async getInitialProps

0 голосов
/ 15 мая 2019

Я использую after.js / razzle / Reaction-router4, потому что приложение реакции, которое я создаю, в конечном итоге будет включать CMS и серверную визуализацию. В я вижу документы для after.js здесь , что я могу использовать параметризованную маршрутизацию для извлечения соответствующих данных для моего компонента перед рендерингом.

Итак, я правильно настроил маршрутизатор для перехода на новый маршрут с пропущенным динамическим идентификатором: 

{
    path: '/onesheet/:id',
    component: asyncComponent({
      loader: () => import('./pages/OneSheet/OneSheet'), // required
    }),
},

и в свой компонент OneSheet я добавляю функцию: 

static async getInitialProps({ req, res, match }) {
    console.log('get initial props');
    const id = fetchId(match.params.id);
        return { id };
}

и так как я не буду вызывать API до тех пор, пока он не будет создан, я хочу сразу разрешить асинхронное обещание с помощью идентификатора (или какой-либо функции, которая получает данные по идентификатору из локального файла JSON, которым я являюсь). используя. Поэтому я попробовал это: 

fetchId = (id) => {
    console.log(`fetch ${id}`);
    return new Promise((resolve, reject)=> {
      resolve(id);
    });
}

И я также помещаю журнал в мою функцию рендеринга:

render(){ console.log(this.props.id)}, чтобы проверить, было ли обещание выполнено, но я явно что-то делаю неправильно, потому что журналы в fetchId и getInitialProps не запускаются, а this.props.id не определен при рендеринге.

Я знаю, что мог бы просто получить this.props.match.params.id от своей функции componentDidMount, но сейчас я хочу смоделировать обещание, поскольку в конечном итоге я буду использовать этот шаблон. Как мне это сделать?

...