Question

当我想通过单击按钮从axios.post获取信息时。但现在我想点击两次按钮来显示信息。我该怎么办？

class ButtonComponent extends React.Component {
state = {display:"ini"};
rep = "ini";

click() {
    var self = this;
    axios.post("url", {})
        .then((rep) => {
            self.rep = rep.data;
        })
        .catch((err) => {
            self.rep = err;
        }) 
    this.setState({
        display: this.rep
    });         
}
render() {
   return  (
    <div>
        <button onClick={this.click.bind(this)}> click me </button>
        {this.state.display}
    </div>
   );
   } 
  };

Answer 1

这不会显示您需要的值。因为在您设置单击内部状态时，您的承诺未得到解决。

你可以这样做。一旦用户点击按钮禁用按钮，直到axios post完成。然后调用setState，以便在div中看到该数据。

class ButtonComponent extends React.Component {

    constructor(props){
              super(props);
              this.state = {
                     data: '',
                     isLoading: false,
               };
               this.click = this.click.bind(this);
        }

    click() {

        this.setState({ isLoading: true });

        axios.post("<MY_URL>:3900/find/rapinfo", {})
            .then((response) => {
                  this.setState({ data: response.data, isLoading: false });
             })
            .catch((err) => {
                  this.setState({ data: err, isLoading: false });
             });
    }

    render() {
       return  (
            <div>
                <button onClick={this.click} disabled={this.state.isLoading}> click me </button>
                {this.state.data}
            </div>
           );

Answer 2

您有2个选项。

在构造函数中绑定您的click事件：

constructor(){
  this.click.bind(this)
}

然后您的按钮变为

<button onClick={this.click()}> click me </button>

或者您可以使用es6箭头函数来传递它，并声明您的点击函数如下：

click = () => {

}

然后您的按钮将变为：

<button onClick={this.click}> click me </button>

单击一次按钮后如何获取axios.post信息

2 个答案: