React中使用Axios调用第三方API并渲染求职搜索结果的实现问题

嘿，刚入门React就动手做实际项目啦，这个思路超赞！我来帮你把这个调用第三方API的求职搜索应用代码理顺，补上关键逻辑部分，让它能正常跑起来：

完整代码示例 #

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.css";
import axios from 'axios';

// 创建Axios实例，补全HH.ru的API基础地址
const axiosInstance = axios.create({
  baseURL: 'https://api.hh.ru/vacancies',
  timeout: 10000, // 设置超时时间，避免请求长时间挂起
});

class App extends Component {
  constructor(props) {
    super(props);
    // 初始化组件状态：搜索关键词、职位列表、加载状态、错误信息
    this.state = {
      searchQuery: '',
      vacancies: [],
      isLoading: false,
      error: null,
    };
  }

  // 同步输入框内容到组件状态
  handleInputChange = (e) => {
    this.setState({ searchQuery: e.target.value });
  };

  // 处理表单提交，发送API请求
  handleSubmit = async (e) => {
    e.preventDefault();
    const { searchQuery } = this.state;

    // 空关键词校验
    if (!searchQuery.trim()) {
      alert('请输入要搜索的职位关键词哦');
      return;
    }

    try {
      this.setState({ isLoading: true, error: null });
      // 携带搜索参数发送GET请求
      const response = await axiosInstance.get('', {
        params: {
          text: searchQuery,
          per_page: 10, // 控制每页返回的职位数量
        },
      });
      // 更新状态，存储获取到的职位数据
      this.setState({ vacancies: response.data.items, isLoading: false });
    } catch (err) {
      // 捕获并处理请求错误
      this.setState({
        error: '获取职位列表失败，请稍后重试',
        isLoading: false,
      });
      console.error('API请求出错:', err);
    }
  };

  render() {
    const { searchQuery, vacancies, isLoading, error } = this.state;

    return (
      <div className="App container mt-4">
        <header className="App-header mb-4">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="mt-2">求职职位搜索</h1>
        </header>

        {/* 搜索表单区域 */}
        <form onSubmit={this.handleSubmit} className="mb-4">
          <div className="input-group">
            <input
              type="text"
              className="form-control"
              placeholder="输入职位关键词（如前端开发）"
              value={searchQuery}
              onChange={this.handleInputChange}
            />
            <button type="submit" className="btn btn-primary" disabled={isLoading}>
              {isLoading ? '搜索中...' : '搜索职位'}
            </button>
          </div>
        </form>

        {/* 错误提示区域 */}
        {error && <div className="alert alert-danger">{error}</div>}

        {/* 职位列表渲染区域 */}
        {isLoading ? (
          <div className="text-center">加载中...</div>
        ) : (
          <div className="row">
            {vacancies.length > 0 ? (
              vacancies.map((vacancy) => (
                <div key={vacancy.id} className="col-md-6 mb-3">
                  <div className="card">
                    <div className="card-body">
                      <h5 className="card-title">{vacancy.name}</h5>
                      <p className="card-text">
                        <strong>公司:</strong> {vacancy.employer?.name || '未知公司'}
                      </p>
                      <p className="card-text">
                        <strong>地点:</strong> {vacancy.area?.name || '未知地点'}
                      </p>
                      <a
                        href={vacancy.alternate_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="btn btn-outline-primary"
                      >
                        查看详情
                      </a>
                    </div>
                  </div>
                </div>
              ))
            ) : (
              !isLoading && <div className="text-center">暂无搜索结果，请尝试其他关键词</div>
            )}
          </div>
        )}
      </div>
    );
  }
}

export default App;

关键部分说明 #

• Axios实例配置：我补全了HH.ru的API基础地址，还加了超时时间，避免请求长时间无响应卡死页面。
• 状态管理：用state存储搜索关键词、职位列表、加载状态和错误信息，让UI能根据状态动态更新，提升用户体验。
• 表单逻辑：handleInputChange实时同步输入框内容到状态，handleSubmit阻止默认提交行为，做了空值校验后再发送异步请求，同时处理加载和错误状态。
• 结果渲染：根据加载状态展示不同内容，请求成功后遍历职位列表渲染卡片，点击详情链接可直接跳转到HH.ru的官方职位页面。

小提示 #

1. 确保你已经安装了所有依赖：npm install axios bootstrap react react-dom
2. HH.ru的API有请求频率限制，测试时别太频繁发送请求哦
3. 如果遇到跨域问题，本地开发可以用React自带的代理配置，或者用CORS插件临时解决（生产环境建议走后端代理）

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