如何在表单提交时触发componentDidUpdate，且保持输入框可编辑？

你的问题核心在于**abc状态同时承担了「输入框实时值」和「API请求参数」两个角色**，输入时的每一次setState都会触发componentDidUpdate里的API调用。下面给你两种清晰的解决思路：

方案一：拆分状态（分离输入临时值与提交有效值） #

通过新增一个临时状态存储输入框的实时内容，只在提交时将其同步到用于API请求的状态中，从根源上避免输入时触发请求。

修改后的完整代码：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      // 临时存储输入框的实时编辑内容
      inputValue: '',
      // 仅存储提交后的有效值，作为API请求参数
      abc: '',
      someQuery: ''
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidUpdate(prevProps, prevState){
    // 仅当提交导致abc状态变化时，才发起API请求
    if (prevState.abc !== this.state.abc) {
      fetch(`/someLink/${this.state.abc}`)
        .then(response => response.json())
        .then(data => {
          this.setState({ someQuery: data.xxx });
        })
        .catch(err => {
          // 建议添加错误处理，避免请求失败无提示
          console.error('API请求出错:', err);
        });
    }
  }

  handleSubmit(e){
    e.preventDefault();
    // 提交时将临时输入值同步到abc状态
    this.setState({ abc: this.state.inputValue });
  };

  handleChange(e){
    const value = e.target.value;
    // 仅更新临时输入状态，不会触发API请求
    this.setState({ inputValue: value });
  };

  render(){
    return(
      <>
        <form onSubmit={this.handleSubmit}>
          <input 
            name='abc' 
            value={this.state.inputValue} 
            onChange={this.handleChange} 
          />
          <input type="submit" value="Submit" />
        </form>
        <div>{this.state.abc} is currently accessing data from {this.state.someQuery}</div>
      </>
    )
  }
}

关键改动说明： #

• 状态拆分：用inputValue处理输入框实时编辑，abc仅保留提交后的有效值
• 生命周期加判断：在componentDidUpdate中增加状态对比，确保只有提交操作才触发请求
• 绑定调整：输入框的value和onChange绑定到临时状态，保证编辑流畅

方案二：直接在提交事件中调用API（更直观） #

绕开componentDidUpdate的依赖，把API请求逻辑抽成独立方法，在点击提交按钮时直接调用。这种方式逻辑更直接，减少生命周期带来的潜在问题。

修改后的完整代码：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      abc: '',
      someQuery: ''
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  // 抽离API请求逻辑为独立方法
  fetchData = (param) => {
    fetch(`/someLink/${param}`)
      .then(response => response.json())
      .then(data => {
        this.setState({ someQuery: data.xxx });
      })
      .catch(err => {
        console.error('API请求出错:', err);
      });
  }

  handleSubmit(e){
    e.preventDefault();
    // 提交时直接触发API请求
    this.fetchData(this.state.abc);
  };

  handleChange(e){
    const value = e.target.value;
    this.setState({ abc: value });
  };

  render(){
    return(
      <>
        <form onSubmit={this.handleSubmit}>
          <input 
            name='abc' 
            value={this.state.abc} 
            onChange={this.handleChange} 
          />
          <input type="submit" value="Submit" />
        </form>
        <div>{this.state.abc} is currently accessing data from {this.state.someQuery}</div>
      </>
    )
  }
}

优势： #

• 逻辑更直观，完全避免了生命周期的触发问题
• 代码结构更清晰，API请求逻辑可复用

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