Reactjs 用“重定向”；componentDidMount（）问题（反应）

我有一些有效的代码。它会立即将用户从

/test

页面重新路由到

FinishedPaying

页面。因此：

class Test extends Component {
  renderRedirect = () => {
      return <Redirect to="/FinishedPaying" />;
  };
  componentDidMount() {
    this.renderRedirect();
  }
...

---

不确定第二个代码块为什么工作。我的理解是，

this.renderDirect（）

应该在所有其他逻辑发生后触发。它似乎根本没有开火。非常感谢您的反馈：）

您不能在componentDidMount中返回组件

，只能在

render（）

中返回组件

当您准备重定向时，您可以有一个设置为true的标志：

componentDidMount() {
  this.setState({
    userInput: this.props.userInput,
    readyToRedirect: true
  });
}

然后在

渲染方法中：

render() {
  this.state.readyToRedirect
    ? <Redirect to="/FinishedPaying" />
    : other stuffs...

您可以将其放入
渲染中，如下所示：

render() {
    if (this.state.redirect){
        return <Redirect
            to="/FinishedPaying"
            userInput={this.state.userInput}
            />;
    }
    const onSuccess = payment => {...}

render（）{
if（this.state.redirect）{
返回；
}
const onSuccess=付款=>{…}

一旦您更改
状态中
的
重定向
值
为
真
，您将被重定向。
导出默认类支付组件{
export default class Pay extends React.Component {

 state = {
  redirect: false
 };

renderRedirect = () => {
  if(this.state.redirect){
   return (
     <Redirect
       to="/FinishedPaying"
       userInput={this.props.userInput}
     />
    );
  }
};

componentDidMount() {
  this.setState({ redirect: true });
}

render() {
const onSuccess = payment => {
  axios
    .post(
      "http://amazonaws.com:3000/ethhash",
      {
        userInput: this.props.userInput,
      }
    )

    .then(response => console.log(response.data, payment))

    .catch(function(error) {
      console.log(error);
    });
};

 return (
   <div>
    {this.renderRedirect()}
    <PaypalExpressBtn
      onSuccess={onSuccess}
    />
   </div>
  );
 }
}

状态={
重定向：false
};
RenderDirect=（）=>{
if（this.state.redirect）{
返回(
);
}
};
componentDidMount（）{
this.setState（{redirect:true}）；
}
render（）{
const onSuccess=付款=>{
axios
.邮政(
"http://amazonaws.com:3000/ethhash",
{
userInput:this.props.userInput，
}
)
.then（response=>console.log（response.data，payment））
.catch（函数（错误）{
console.log（错误）；
});
};
返回(
{this.renderDirect（）}
);
}
}
谢谢。此解决方案可以工作，但它绕过了Paypal逻辑，这是页面的必要组件。谢谢，此解决方案可以正确呈现，但在Paypal逻辑之前执行。如果我将其放在Paypal逻辑之后，Paypal将执行，但页面不会重定向。只要在Paypal逻辑不可用时更改
重定向
值状态即可e、 您可以使用
this.setState（{'redirect'：true}）
非常感谢您的帮助。这些解决方案可以正常工作，因为它们可以正确渲染，但前提是它们位于Paypal逻辑之上（因此不运行该逻辑）。答案是在Paypal逻辑运行后将标志设置为
true
。谢谢：）可能的重复
const onSuccess = payment => {
  ...
}

export default class Pay extends React.Component {
  ...
}

render() {
    if (this.state.redirect){
        return <Redirect
            to="/FinishedPaying"
            userInput={this.state.userInput}
            />;
    }
    const onSuccess = payment => {...}

export default class Pay extends React.Component {

 state = {
  redirect: false
 };

renderRedirect = () => {
  if(this.state.redirect){
   return (
     <Redirect
       to="/FinishedPaying"
       userInput={this.props.userInput}
     />
    );
  }
};

componentDidMount() {
  this.setState({ redirect: true });
}

render() {
const onSuccess = payment => {
  axios
    .post(
      "http://amazonaws.com:3000/ethhash",
      {
        userInput: this.props.userInput,
      }
    )

    .then(response => console.log(response.data, payment))

    .catch(function(error) {
      console.log(error);
    });
};

 return (
   <div>
    {this.renderRedirect()}
    <PaypalExpressBtn
      onSuccess={onSuccess}
    />
   </div>
  );
 }
}