ReactJS提交处理器异常：表单提交需点击两次才获取结果

嘿，我来帮你搞定这个问题！你遇到的核心原因是React的setState是异步操作——当你在handleSubmit里调用this.setState({spaces_list: ...})后，立刻去使用this.state.spaces_list发请求的话，此时state还没完成更新，第一次提交时拿到的还是旧值，第二次提交时才是上一次更新后的结果，所以需要点两次才生效。

下面给你几种针对性的解决方案：

方案1：直接获取表单值，无需存入state（推荐） #

如果spaces_list只是用来发送请求，不需要在组件其他地方使用，那完全没必要存到state里，直接在提交时获取输入值即可，避免异步更新的问题：

class SearchForm extends React.Component{
  constructor(props) {
    super(props);
    this.state = {inputtermvalue: "", spacesname: ""};
    // 绑定方法的this上下文，避免调用时丢失
    this.updateInputValue = this.updateInputValue.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  updateInputValue(evt){
    this.setState({inputtermvalue: evt.target.value});
  }

  handleSubmit(e){
    e.preventDefault(); // 一定要阻止表单默认提交行为，避免页面刷新
    // 直接获取目标输入框的值
    const spacesList = document.querySelector("input.sp-autocomplete-spaces").value;
    // 用Axios发送GET请求
    axios.get(`你的API地址?term=${this.state.inputtermvalue}&spaces=${spacesList}`)
      .then(response => {
        // 这里处理请求结果，比如更新state或者传递给父组件
        console.log("请求结果：", response.data);
      })
      .catch(error => {
        console.error("请求出错：", error);
      });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          type="text" 
          value={this.state.inputtermvalue}
          onChange={this.updateInputValue}
          placeholder="输入搜索关键词"
        />
        <input 
          type="text" 
          className="sp-autocomplete-spaces"
          placeholder="输入空间名称"
        />
        <button type="submit">搜索</button>
      </form>
    );
  }
}

方案2：使用setState的回调函数获取最新state #

如果你确实需要把spaces_list存入state（比如要在组件其他地方展示），可以利用setState的第二个参数——回调函数，它会在state更新完成后执行，此时就能拿到最新的state值：

handleSubmit(e){
  e.preventDefault();
  const spacesList = document.querySelector("input.sp-autocomplete-spaces").value;
  // 传入回调函数，确保state更新后再发请求
  this.setState({spaces_list: spacesList}, () => {
    axios.get(`你的API地址?term=${this.state.inputtermvalue}&spaces=${this.state.spaces_list}`)
      .then(response => {
        console.log("请求结果：", response.data);
      })
      .catch(error => {
        console.error("请求出错：", error);
      });
  });
}

额外建议：用React管理所有表单输入，避免jQuery操作DOM #

你现在用jQuery获取输入值，容易导致React的state和真实DOM不同步，建议把sp-autocomplete-spaces输入框也用React state管理，这样能彻底避免这类问题：

class SearchForm extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      inputtermvalue: "", 
      spaces_list: "", 
      spacesname: ""
    };
    // 绑定所有方法的this
    this.updateInputValue = this.updateInputValue.bind(this);
    this.updateSpacesValue = this.updateSpacesValue.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  updateInputValue(evt){
    this.setState({inputtermvalue: evt.target.value});
  }

  updateSpacesValue(evt){
    this.setState({spaces_list: evt.target.value});
  }

  handleSubmit(e){
    e.preventDefault();
    // 直接从state拿值，无需操作DOM
    axios.get(`你的API地址?term=${this.state.inputtermvalue}&spaces=${this.state.spaces_list}`)
      .then(response => {
        console.log("请求结果：", response.data);
      })
      .catch(error => {
        console.error("请求出错：", error);
      });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          type="text" 
          value={this.state.inputtermvalue}
          onChange={this.updateInputValue}
          placeholder="输入搜索关键词"
        />
        <input 
          type="text" 
          className="sp-autocomplete-spaces"
          value={this.state.spaces_list}
          onChange={this.updateSpacesValue}
          placeholder="输入空间名称"
        />
        <button type="submit">搜索</button>
      </form>
    );
  }
}

另外，你也可以用箭头函数定义类方法，这样就不用在constructor里手动绑定this了，代码会更简洁：

// 比如把方法改成箭头函数形式
updateInputValue = (evt) => {
  this.setState({inputtermvalue: evt.target.value});
}

handleSubmit = (e) => {
  e.preventDefault();
  // ...逻辑代码
}

内容的提问来源于stack exchange，提问作者Samer Sboui