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

您不能在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
  )

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

如果this不需要任何内容，您甚至可以将其放在课程之外

const onSuccess = payment => {
  ...
}

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

Answer 2

您可以将其放入render中，例如：

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

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

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

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

3 个答案: