React组件中componentDidUpdate无限循环问题的解决方案咨询

嘿，这个问题我太熟了！你遇到的无限循环，核心原因是每次在componentDidUpdate里调用setState更新data，都会再次触发componentDidUpdate，形成了闭环。咱们一步步来搞定它：

核心解决方案：添加状态变化的判断 #

componentDidUpdate提供了prevProps和prevState两个参数，我们可以用它对比当前状态和上一次状态，只有当searchValue真正变化时，才发起API请求，避免不必要的重复执行。

同时建议加上searchValue非空的判断，避免初始状态或者空输入时发送无效请求。

优化后的代码 #

constructor(props) {
  super(props);
  this.state = {
    searchValue: "",
    data: null,
  };
  this.handleInputChange = this.handleInputChange.bind(this);
  // 用于取消未完成的请求，防止竞态问题
  this.cancelTokenSource = null;
}

handleInputChange(event) {
  this.setState({ searchValue: event.target.value });
}

componentDidUpdate(prevProps, prevState) {
  // 只有当searchValue变化，且不为空时才发起请求
  if (this.state.searchValue !== prevState.searchValue && this.state.searchValue.trim()) {
    // 先取消之前未完成的请求，避免竞态问题
    if (this.cancelTokenSource) {
      this.cancelTokenSource.cancel("请求已取消");
    }
    this.cancelTokenSource = axios.CancelToken.source();
    
    const url = 'https://www.google.com/?search=' + this.state.searchValue;
    axios.get(url, {
      cancelToken: this.cancelTokenSource.token
    })
    .then(response => {
      this.setState({data: response.data});
    })
    .catch(error => {
      // 忽略取消请求的错误
      if (!axios.isCancel(error)) {
        console.error('请求出错:', error);
      }
    });
  }
}

// 组件卸载时取消未完成的请求，防止内存泄漏
componentWillUnmount() {
  if (this.cancelTokenSource) {
    this.cancelTokenSource.cancel("组件已卸载");
  }
}

额外说明 #

• 加入了请求取消逻辑：当用户快速输入多个值时，之前的未完成请求会被取消，避免旧请求的结果覆盖新请求的结果（竞态问题）。
• 组件卸载时取消请求，防止内存泄漏。

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