Question

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

2018-03-23

12753

javascript reactjs react-native

当我想通过点击按钮从 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

这不会显示您需要的值。因为当您在 click 方法中设置状态时，您的承诺尚未解决。

您可以做这样的事情。一旦用户点击按钮，禁用按钮，直到 axios 发布完成。然后调用 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个选项。

在构造函数中绑定单击事件：

700376033

，然后您的按钮变为

445721755

或者，您可以使用ES6箭头函数也通过此功能，然后声明单击功能：

950763175

，然后您的按钮将变为：

303981314