提交处理程序在 ReactJS 中不能正常工作？

Question

我的朋友们，我正在做一个反应 class，它在提交表单时获取输入值，使用 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 中不能正常工作？

Submit handler doesn't work correctly in ReactJS?

javascript

onchange

submit

onsubmit

reactjs