React多API请求数据在VictoryPie饼图展示问题求助

嘿，作为React新手能尝试多层API请求已经很棒啦！我看了你的代码，发现几个核心问题需要调整，这样才能把获取到的任务和警告数正确展示在饼图里。咱们一步步来修改：

几个关键问题的优化点 #

• 绝对不要在render里调用API：render方法会被React频繁触发（比如组件更新、父组件渲染时），你现在这样写会导致API被重复调用，不仅浪费资源还可能造成数据混乱。应该用类组件的componentDidMount生命周期方法来初始化API请求。
• 用组件state存储数据：你现在把获取到的numberOfHighPriorityWarnings只打印了，没有存起来。React组件需要通过state来管理数据，当state更新时，组件会自动重新渲染，饼图就能拿到最新数据。
• 优化异步请求的写法：多层嵌套的then会让代码变“回调地狱”，用async/await能让异步代码更清晰易读，也方便我们收集所有请求完成的数据。

修改后的完整代码 #

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { VictoryPie } from 'victory';

class App extends Component {
  constructor(props) {
    super(props);
    // 初始化state，用来存储饼图需要的数据
    this.state = {
      pieData: [],
      isLoading: true // 加个加载状态，提升用户体验
    };
    // 绑定通用fetch方法的this指向
    this.authFetch = this.authFetch.bind(this);
  }

  // 通用的带授权的fetch函数，减少重复代码
  authFetch(url) {
    const headers = new Headers();
    headers.append('Authorization', 'Basic YWRtaW46YWRtaW4=');
    return fetch(url, { headers })
      .then(result => result.json())
      .catch(err => {
        console.error('请求出错:', err);
        return Promise.reject(err);
      });
  }

  // 改写为async函数，让异步逻辑更清晰
  async getAllJobsAPI() {
    try {
      // 1. 获取所有任务列表
      const jobList = await this.authFetch('http://localhost:8080/api/json');
      // 2. 遍历每个任务，并行请求对应的lastBuild和lint数据
      const pieDataPromises = jobList.jobs.map(async (jobItem) => {
        const jobName = jobItem.name;
        // 获取该任务的lastBuild数据
        const lastBuild = await this.authFetch(`http://localhost:8080/job/${jobName}/lastBuild/api/json`);
        // 获取对应的lint结果
        const lintResult = await this.authFetch(`http://localhost:8080/job/${jobName}/${lastBuild.id}/androidLintResult/api/json`);
        // 返回饼图需要的格式
        return {
          x: jobName,
          y: lintResult.numberOfHighPriorityWarnings
        };
      });

      // 等待所有任务的请求都完成
      const pieData = await Promise.all(pieDataPromises);
      // 更新state，触发组件重新渲染
      this.setState({
        pieData,
        isLoading: false
      });
    } catch (err) {
      console.error('获取数据失败:', err);
      this.setState({ isLoading: false });
    }
  }

  // 在组件挂载完成后调用API，只执行一次
  componentDidMount() {
    this.getAllJobsAPI();
  }

  render() {
    const { pieData, isLoading } = this.state;

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Build Results</h1>
        </header>
        {/* 加载状态提示，避免页面空白 */}
        {isLoading ? (
          <p>正在加载数据...</p>
        ) : (
          // 用state里的pieData渲染饼图
          <VictoryPie data={pieData} />
        )}
      </div>
    );
  }
}

export default App;

代码改动说明 #

1. 新增通用fetch方法：把重复的headers和fetch逻辑封装成authFetch，减少代码冗余，也方便统一处理请求错误。
2. 用async/await和Promise.all：Promise.all可以让多个任务的API请求并行执行，比逐个串行请求效率更高，同时确保所有数据都获取到后再更新state。
3. 添加加载状态：当数据还在请求时，给用户显示加载提示，提升用户体验。
4. state管理数据：把最终的饼图数据存在pieData里，render时直接从state读取，数据更新时自动重新渲染饼图。

这样修改后，你的代码就能正确获取所有任务的警告数，并且在VictoryPie里展示出来啦！如果遇到请求失败的情况，控制台也会打印错误信息，方便你排查问题。

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