Question

我的朋友我提交的反应类在提交表单时获取输入值，使用axios发送获取请求但我在第二次点击后得到结果

class SearchForm extends React.Component{
  constructor(props) {
    super(props);
    this.state = {inputtermvalue: "",spaces_list: "",spacesname: ""};
  }
  componentDidMount() {
  }
  updateInputValue(evt){
    this.setState({inputtermvalue: evt.target.value});
  }
  handleSubmit(){
    this.setState({spaces_list: $("input.sp-autocomplete-spaces").val()});
    this.sendGetRequest();
  }
  sendGetRequest(){
    var _this = this;
    this.serverRequest = 
        axios
      .get("/rest/1.0/term/search", {
        params: {
                     query: this.state.inputtermvalue, 
                     spaces: this.state.spaces_list
        },
        headers: {'content-type': 'application/json'}
    })
    .then(({data}) => {

Answer 1

setState是异步调用，因此您无法在继续之前立即完成调用。在你的代码中：

handleSubmit(){
    this.setState({spaces_list: $("input.sp-autocomplete-spaces").val()});
    this.sendGetRequest();
}

您正在更新状态，然后调用使用该新状态值的方法。可能发生的是您在状态更新完成之前调用this.sendGetRequest。

在调用componentDidUpdate之前，您应该使用this.sendGetRequest生命周期挂钩来确保状态已完成更新：

handleSubmit () {
    this.setState({
        spaces_list: $("input.sp-autocomplete-spaces").val()
    });
}

componentDidUpdate (prevProps, prevState) {
    if(prevState.spaces_list !== this.state.spaces_list) {
        this.sendGetRequest();
    }
}

提交处理程序在ReactJS中无法正常工作？

1 个答案: