Проблемы с перенаправлением / маршрутизацией в React и Express - PullRequest
0 голосов
/ 02 апреля 2019

Я создаю приложение поиска рейсов, которое выполняет внешние вызовы API.Данные будут реорганизованы и возвращены в компоненте результатов поиска.

При отправке данные отправляются в экспресс и занимает около 10 секунд или более для завершения всех вызовов API.

Я думаю, что в какой-то момент мне нужен загрузчик для задержки APIзвонки, но я также не уверен, как отправлять / отображать данные.

В моем нынешнем виде у меня есть две страницы home.js- '/', где я выполняю поиск и отправляюсь на серверную сторону, и Prices.js- '/ search', который при загрузке извлекает данные изфайл JSON.но я не подключил их

Оба файла работают, но мне нужно их подключить.Когда я нажимаю «отправить», пользовательские входные данные отправляются на сервер и выполняются вызовы API, но чтобы увидеть результаты, я должен вручную обновить localhost: 3000 / search.

В экспресс-приложении после всех вызовов APIЯ попытался метод res.redirect, однако ошибка при настройке заголовков после отправки клиенту.

В ответ, я попытался после отправки, чтобы перенаправить на страницу поиска.Однако я не смог заставить его перенаправить, а также, как только вызывается страница / search, он получает данные из файла.Это произойдет до того, как API завершит запись в файл и, следовательно, отобразятся предыдущие результаты поиска.

--in app.js 
setTimeout(() => {
        Promise.all([promise, promise2]).then(values => {

            return res.redirect('http://localhost:3000/search');

        });
    }, 25000);

I had to wrap the api calls in promises so it will only redirect after all is written to file. 

(в реагирующих ценах. Js)

 componentDidMount() {

   fetch('/search')
            .then(res => {

                return res.json()

            })
            .then(res => {

                console.log(res.toString());


                this.setState({flightData: res});

            })
            .catch(error => console.log(error));
    }

home.js

home.js

```
onChange = (e) => {
    this.setState({
       originOne: e.target.value, originTwo: e.target.value});
    };


 onSubmit = (e) => {
     e.preventDefault();

     const { originOne, originTwo ,redirectToResult} = this.state;


};


```
app.js - I have all the functions calling each other in a waterfall style ( probably not the best way I know) 

app.post('/', function getOrigins(req,res) {

     var OrigOne;
     var OrigTwo;

....

function IataCodeSearchOrg1(res, OrigOne, OrigTwo) {
... 
findPrices(res,A,B)
}

 function findPrices(res, A, B) {

         promise = new Promise(function (resolve) {
...
}
}

All the methods are called within eachother. The api calls are in a loop and after each iteration they are written to the json file. 

All these functions are in the app.post method and i tried to res.redirect but it did not work.  

1 Ответ

0 голосов
/ 02 апреля 2019

РЕДАКТИРОВАТЬ:

Вы не можете перенаправить на стороне сервера из запроса XHR.Вам нужно будет перенаправить на стороне клиента.

например

componentDidMount() {

   fetch('/search')
       .then(res => res.json())
       ...
       .then(() => window.location = '/myredirecturl')
} 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...