渲染顺序问题（反应）

Question

我有一个 Paypal 组件，它在成功付款时执行逻辑。

目标是首先执行paypal/axios.post，然后是this.setState(...)。

以下代码块执行setState() 在 Paypal 逻辑之前，并且没有付款：

render() {
    const onSuccess = payment => {
      axios
        .post(
          "http://compute.amazonaws.com:3000/ethhash",
          {userInput: this.props.userInput}
        )
        .then(response => console.log(response.data, payment))
            .catch(function(error) {
          console.log(error);
        });
    };

this.setState({ redirect: true });

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

如果我将 setState() 嵌套在 onSuccess 或 axios.post 逻辑中，它会破坏我的 (express) 服务器。奇怪的是，我的服务器给我的错误是某个函数不是函数……命名函数在所有其他条件下都有效。

感谢您对我的帮助，干杯:)

Answer 1

首先，您不应该在渲染函数中使用 setState，您必须将其移至 React 的其他生命周期，或者您需要根据某些用户操作调用 post 请求。

onPayment= async ()=>{
 const res=await axios.post("http://compute.amazonaws.com:3000/ethhash",
          {userInput: this.props.userInput}
        )
   // check here if any error if error don't set the setState.

 this.setState({redirect:true})
}