Question

我正在创建一个进行外部api调用的航班搜索应用。数据将被重组并返回到搜索结果组件中。

提交后，数据将被发送以表达，大约需要10秒或更长时间才能完成所有api调用。

我认为在api调用延迟期间的某个时候我需要加载器，但是我不确定如何发送/呈现数据。

就目前而言，我有两个页面home.js-'/'，我在其中进行搜索并将其发送到服务器端，以及prices.js-'/ search'，这两个页面在加载时会从json文件中获取数据。但我没有连接它们

两个文件都可以，但是我需要连接它们。当我按Submit时，用户输入将发送到服务器并进行api调用，但是要查看结果，我必须手动刷新localhost：3000 / search。

在所有api调用之后的express应用程序中，我尝试使用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.

（在reactprices.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.

Answer 1

编辑：

您不能从XHR请求重定向服务器端。您将需要重定向客户端。

例如

componentDidMount() {

   fetch('/search')
       .then(res => res.json())
       ...
       .then(() => window.location = '/myredirecturl')
}

React和Express中的重定向/路由问题

1 个答案: