Question

我有一个具有以下路由的React路由器：

'/'=我的主要应用程序组件 '/ create'=我的辅助视图

在按钮的onClick的“创建”视图中，我发出axios.post调用以将JSON对象发布到我们拥有的API。

成功后，我使用Reacts setState（{ReturnToHome：true}）设置了一个名为ReturnToHome的状态变量

在我的渲染方法中，我有一个：

if (this.state.ReturnToHome) { return ( <Redirect to='/' /> )};

重要提示：这是我在努力奋斗的有趣事情：

1）当相同的this.setState调用不在.then的axios中时，保证重定向可以完美地工作 2）当this.setState在.then内部时，则不起作用。

我认为一开始它可能是一个范围界定问题，所以我将其保存到一个pThis中，并在.then中专门使用了pThis，但它没有任何积极作用。

另外请注意：当我第一次进入视图时，路径为：＃/ create。在使用重定向更新状态后，路径为？＃/ create ...我不确定是否相关，但希望可能是一个线索。

关于为什么这样不起作用的任何想法？也许甚至是有关在诺言类型场景中如何实现这一目标的工作示例？

Answer 1

确保使用React-router <Switch>组件包装了应用层次结构，并正确定义了路由，在可能的可用路径上进行迭代切换，以允许您使用path变量处理错误。
最好使用&&标记在渲染中写入条件。例如：return (this.state.ReturnToHome && <Redirect to="/" />)，就可以完成工作。

从理论上讲，在每次状态更新时，组件都应更新并将更新并最终渲染，因此问题不在渲染函数中。

因此，这是您的情况的一些示例：

export class App extends React.component {
.....
render() {
    return <ReactRouter>
                <Switch>
                      <Route exact path="/" render={homeComponent} />
                      <Route path="/create" render={createComponent}/></Switch> 
           </ReactRouter>
}
export class CreateComponent extends React.component {
    constructor(){
         this.state = {
              ReturnToHome: false
         }
         this.callToApi = this.callToApi.bind(this)
    }
    callToApi = e => {//e not required but always good to record event handlers......
        const self = this
        axios.post("apiuri",{params}..complete the post method requiremnets based on api..).then((response)=> {
            self.setState({ReturnToHome:true})
        })
    }
    render(){
         return ....some logic with buttons to start the callToApi method.....
         (this.state.ReturnToHome && <Redirect to="/" />)
}

Answer 2

好的，我找到了解决方案。最后，我将其范围缩小到要修改的单个字段。每次我修改字段时，应用程序都会表现出这种奇怪的行为。

我开始进行实验，真的不明白为什么我会看到这种行为，然后将作为基本元素的标签更改为。

一切正常。如果我知道为什么...

我的猜测是我仍然不了解ReactJS。

希望这对某人有帮助！

React的重定向组件未按预期在axios中运行。.then（）承诺

2 个答案: