使用“componentDidMount()”重定向：问题（反应）

Question

我有一些有效的代码。它立即将用户从/test页面重新路由到FinishedPaying页面。是这样的：

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

以下代码用于发送Paypal交易，然后将用户路由到/FinishedPaying页面。所有其他逻辑都按预期工作：

export default class Pay extends React.Component {
  state = {
    userInput: ""
  };
  renderRedirect = () => {
      return (
        <Redirect
          to="/FinishedPaying"
          userInput={this.state.userInput}
        />
      );
  };
  componentDidMount() {
    this.setState({ userInput: this.props.userInput });
    this.renderRedirect();
  }

  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>
        <PaypalExpressBtn
          onSuccess={onSuccess}
        />
      </div>
    );
  }
}

不知道为什么第二个代码块有效。我的理解是this.renderRedirect()应该在所有其他逻辑发生后触发。它似乎根本没有开火。任何反馈表示赞赏:)

Answer 1

你可以把它放在你render喜欢的地方：

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

只要你改变你的redirect价值state了true，你会被重定向。