Question

我正在使用react.js和Node.js以及使用react-router-dom 4进行前端路由创建一个应用程序。

我正在对AJAX请求使用jquery。当用户使用凭据登录然后使用this.props.history.push('/dashboard')

重定向到仪表板页面时，有用户登录api。

UserLoginAPI(){
        let formData = this.state.form;
        $.ajax({ 
            url:BASEURL+CONSTANT.login,
            type:'POST',
            data:formData,
            success:(data)=>{  
                let form = this.state.form;
                this.setState({popUpMessage:data.data });
                this.setState({showPopUp:true});
                this.props.history.push('/dashboard')
            },
            error:(err)=>{ 
                this.setState({popUpMessage:err.responseJSON.message || 'Some Undefined Error Occured.'});
                this.setState({showPopUp:true}) ;
                console.log(err);
            }
        });
    }

成功登录后，用户将重定向到仪表板页面，但其外部普通javascript无法正常运行。 Page中的渲染可能存在一些问题。我陷入了困境。下面是路由配置

<Router>
        <div className="App"> 
          <Header />
          <Slider />
          <Switch>
                <Route exact path='/' component={Home} />
                <Route  path='/register' component={Register} />
                <Route  path='/login' component={Login} />
                <Route  path='/dashboard' component={Dashboard} />
          </Switch>

        </div>
      </Router>

我无法找出问题所在。请帮忙！

Answer 1

如何导入UserLoginAPI？也许您的示例代码还不够。如果函数在类范围内，则必须使用箭头函数来绑定类上下文；如果API的方法位于外部，则必须从方法中返回Promise（）并将结果解析到组件中。

// In-class method
UserLoginAPI= () => {
        let formData = this.state.form;
        $.ajax({ 
            url:BASEURL+CONSTANT.login,
            type:'POST',
            data:formData,
            success:(data)=>{  
                let form = this.state.form;
                this.setState({popUpMessage:data.data });
                this.setState({showPopUp:true});
                this.props.history.push('/dashboard')
            },
            error:(err)=>{ 
                this.setState({popUpMessage:err.responseJSON.message || 'Some Undefined Error Occured.'});
                this.setState({showPopUp:true}) ;
                console.log(err);
            }
        });
    }

// Return promise

MyFunction(myParams) {
       return $.ajax({
            url: myParams.url,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(expenseSet.toJSON())
        });
}

在重定向上，外部JS在react-router-dom中不起作用

1 个答案: