React项目中Axios GET请求无响应无报错问题求助

我帮你排查出几个关键问题，咱们一个个来看：

问题1：搜索提交时未触发父组件的请求逻辑 #

你的ProductSearch组件里，Search组件的onSearch回调只做了console.log(value)，完全没有调用父组件传过来的onSubmit方法！这就导致父组件的onSearchSubmit函数根本没执行，自然不会有Axios请求发出。

修正后的ProductSearch组件：

import React from 'react';
import {Card, Input} from "antd";
const Search = Input.Search;
class ProductSearch extends React.Component{
  state = { url: '' };
  onFormSubmit = (event) => {
    event.preventDefault();
  }
  render(){
    return (
      <Card className="gx-card" title="Search Box">
        <form onSubmit={this.onFormSubmit}>
          {/* 调用props.onSubmit把搜索值传递给父组件 */}
          <Search 
            placeholder="Product Link: ex. http://www.aliexpres.com/item/name/id.html" 
            onSearch={value => this.props.onSubmit(value)} 
            enterButton="Submit" 
          />
        </form>
      </Card>
    );
  }
}
export default ProductSearch;

问题2：Axios GET请求的参数格式错误 #

你的onSearchSubmit里，Axios的传参写法完全不对。axios.get的第二个参数是配置对象，GET请求的查询参数需要放在params属性中，而不是你写的嵌套url.query结构。另外，普通函数写法可能存在this绑定隐患，建议改成箭头函数。

修正后的SamplePage组件onSearchSubmit方法：

// 改成箭头函数避免this绑定问题
onSearchSubmit = (url) => {
  // 正确传参：用params字段存放查询参数
  axios.get('scrap', { params: { url } })
    // 务必添加catch捕获错误，不然请求出错也看不到日志
    .then(response => {
      console.log('请求成功:', response.data);
    })
    .catch(error => {
      console.error('请求出错:', error);
    });
}

可选优化：添加请求状态反馈 #

为了提升用户体验和调试便利性，你可以在组件中加入加载状态、错误提示：

优化后的SamplePage组件 #

import React, {Component} from "react";
import axios from 'util/Api';
import ProductSearch from "./ProductSearch";
import IntlMessages from "util/IntlMessages";
class SamplePage extends Component {
  state = {
    loading: false,
    errorMsg: ''
  };

  onSearchSubmit = (url) => {
    this.setState({ loading: true, errorMsg: '' });
    axios.get('scrap', { params: { url } })
      .then(response => {
        console.log('请求成功:', response.data);
        // 这里可以处理返回的数据，比如渲染到页面
      })
      .catch(error => {
        console.error('请求出错:', error);
        this.setState({ errorMsg: '请求失败，请检查链接或服务器状态' });
      })
      .finally(() => {
        this.setState({ loading: false });
      });
  }
  render(){
    return (
      <div className="ui container" style={{ marginTop: '10px'}}>
        {this.state.errorMsg && <div style={{color: 'red', marginBottom: '8px'}}>{this.state.errorMsg}</div>}
        <ProductSearch onSubmit={this.onSearchSubmit} loading={this.state.loading} />
      </div>
    );
  }
}
export default SamplePage;

同步修改ProductSearch组件 #

<Search 
  placeholder="Product Link: ex. http://www.aliexpres.com/item/name/id.html" 
  onSearch={value => this.props.onSubmit(value)} 
  enterButton="Submit" 
  loading={this.props.loading}
/>

做完这些修改后，你应该就能在网络面板看到正常的GET请求了，也能通过控制台日志排查请求的成功/失败情况。

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