一旦从react中的后端接收到数据，是否有方法重定向用户

Question

我正试图从前端传入一个转录本(用户通过对着麦克风说话给出(，然后数据将进入后端，后端将向前端返回一个JSON对象。我如何使我的网站在该过程(从前端到后端到前端的数据(发生时将用户重定向到加载屏幕，然后最终一旦该过程完成，它将把它从加载屏幕重定向到"加载"屏幕；结果页"；将显示该数据？

我使用的是react版本6.14.13。有人知道我能做什么吗？

这些函数在我的"；主页"；是什么来处理这个：

class Product extends Component {
constructor() {
super()
this.state = {
// Backend API data
data: {"data": {}}
}
}
handleSending() {
const options = {
method: "POST",
headers: {
'Content-Type': 'application/json;charset=utf-8', 
},
body: JSON.stringify(this.state.text)
};
fetch("http://127.0.0.1:5000/", options)
.then(response=> response.json())
.then(json => this.setState({data: json}))
.then(this.handleRedirect())
}

handleRedirect() {
// REDIRECT USER TO LOADING PAGE

// ONCE PROCESS IS DONE, REDIRECT USER TO "RESULTS PAGE"
}
}

Answer 1

这是显示加载页面的常用方式。

并且重定向"；结果页"；，我建议你使用像React Router这样的路由库(https://reactrouter.com/)。

class Product extends Component {
constructor() {
super()
this.state = {
// Backend API data
data: {"data": {}},
loading: false
}
handleSending() {
const options = {
method: "POST",
headers: {
'Content-Type': 'application/json;charset=utf-8', 
},
body: JSON.stringify(this.state.text)
};
// Set loading true
this.setState({loading: true});
fetch("http://127.0.0.1:5000/", options)
.then(response=> response.json())
.then(json => this.setState({data: json}))
.then(this.handleRedirect())
.finally(()=> {
// Set loading false
this.setState({loading: false});
});
}

handleRedirect() {
// REDIRECT USER TO LOADING PAGE

// ONCE PROCESS IS DONE, REDIRECT USER TO "RESULTS PAGE"
// router.push("result_page");
}
render() {
return (
{this.state.loading && <div>loading...</div>
{!this.state.loading && <div>your product page</div>}
)
}
}

我想知道你为什么要用这么旧的react版本。

Answer 2

使用Router从"react router dom"；

import { withRouter } from "react-router-dom";

然后，在默认导出时，您应该使用withRouter包装组件。

export default withRouter(Product);

然后你可以访问来自道具的历史记录，你可以使用它的推送方法将用户推送到所需的页面。

handleRedirect() { 
this.props.history.push("/results-page"); 
}