使用"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 => {...}

在true中更改redirect的CC_7值后，您将被重定向。

Answer 2

您无法返回ComponentDidmount中的组件<Redirect to="/FinishedPaying" />，您只能在render()中执行此操作。

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

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

然后在您的render方法中：

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

或我认为，一种更可读的方法：

render() {
  if (this.state.readyToRedirect) return <Redirect to="/FinishedPaying" />
  return (
    // rest of the code
  )

---

我也不会在render中定义onSuccess功能，每个状态更改都会触发渲染并一次重新定义该功能。

如果它不需要this中的任何内容，您甚至可以将其放在类外

之外

const onSuccess = payment => {
  ...
}
export default class Pay extends React.Component {
  ...
}

Answer 3

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>
  );
 }
}