使用React JS在表格body中嵌套请求获取PCR1和PCR2数据

以下是适配你需求的完整修改代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColumnResizer from "column-resizer";
import "./table.css"
import axios from "axios";

class ReactTable extends Component {
  constructor(props) {
    super(props);
    this.tableSelector = "#somethingUnique";
    this.state = {
      api: []
    }
  }

  async componentDidMount() {
    try {
      // 先请求PCR1接口
      const pcr1Res = await axios.get('/AmpRestAPI/webresources/getPCRList/all', {
        auth: {
          username: '替换为你的实际账号',
          password: '替换为你的实际密码'
        }
      });
      const pcr1Data = pcr1Res.data.results || [];
      // 先更新state渲染PCR1数据
      this.setState({ api: pcr1Data }, async () => {
        // 第一次渲染完成后发起PCR2请求
        const pcr2Res = await axios.get('/AmpRestAPI/webresources/getPCR2List/all', {
          auth: {
            username: '替换为你的实际账号',
            password: '替换为你的实际密码'
          }
        });
        const pcr2Data = pcr2Res.data.results || [];
        // 合并两个接口的数据更新state，完成第二次渲染
        this.setState(prev => ({ api: [...prev.api, ...pcr2Data] }));
      });
    } catch (error) {
      console.log('请求出错：', error.response || error);
    }

    if (this.props.resizable) {
      this.enableResize();
    }
  }

  componentWillUnmount() {
    if (this.props.resizable) {
      this.disableResize();
    }
  }

  componentDidUpdate() {
    if (this.props.resizable) {
      this.enableResize();
    }
  }

  componentWillUpdate() {
    if (this.props.resizable) {
      this.disableResize();
    }
  }

  enableResize() {
    const options = this.props.resizerOptions;
    if (!this.resizer) {
      this.resizer = new ColumnResizer(
        ReactDOM.findDOMNode(this).querySelector(`${this.tableSelector}`),
        options
      );
    } else {
      this.resizer.reset(options);
    }
  }

  disableResize() {
    if (this.resizer) {
      this.resizer.reset({ disable: true });
    }
  }

  render() {
    return (
      <div>
        <div className="container-fluid  example pt-3" >
          <table id="somethingUnique" cellSpacing="0" className="border-primary" style={{ fontSize: "100%" }}>
            <thead>
              <tr>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="50"
                  y="75%"
                  fontSize="75"
                >Thumbnail</text>
                </svg></th>
                <th ><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="0"
                  y="75%"
                  fontSize="75"
                >Clip Name</text>
                </svg></th>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="50"
                  y="75%"
                  fontSize="75"
                  fill="black"
                >Slog Name</text>
                </svg></th>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="20"
                  y="75%"
                  fontSize="75"
                  fill="black"
                >Channel Name</text>
                </svg></th>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="50"
                  y="75%"
                  fontSize="75"
                  fill="black"
                >Status</text>
                </svg></th>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="50"
                  y="75%"
                  fontSize="75"
                  fill="black"
                >Loop</text>
                </svg></th>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="50"
                  y="75%"
                  fontSize="75"
                  fill="black"
                >Start Time</text>
                </svg></th>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="50"
                  y="75%"
                  fontSize="75"
                  fill="black"
                >Duration</text>
                </svg></th>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="35"
                  y="75%"
                  fontSize="75"
                  fill="black"
                >Down Counter</text>
                </svg></th>
                <th><svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 500 75"
                  preserveAspectRatio="xMinYMid meet"
                ><text
                  x="50"
                  y="75%"
                  fontSize="75"
                  fill="black"
                >Up Counter</text>
                </svg></th>
              </tr>
            </thead>
            <tbody>
              {
                this.state.api.map((item, index) => (
                  <tr key={index}>
                    {/* 以下字段替换为你接口返回的实际字段名 */}
                    <td><img src={item.thumbnail} alt="" /></td>
                    <td>{item.clipName}</td>
                    <td>{item.slogName}</td>
                    <td>{item.channelName}</td>
                    <td>{item.status}</td>
                    <td>{item.loop}</td>
                    <td>{item.startTime}</td>
                    <td>{item.duration}</td>
                    <td>{item.downCounter}</td>
                    <td>{item.upCounter}</td>
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div >
      </div>
    );
  }
}

export default ReactTable;

核心改动说明 #

• 串行请求实现：用async/await语法简化异步逻辑，第一个接口请求成功后先更新state完成第一次渲染，利用setState的回调函数发起第二个请求，返回后合并两个接口的数据再次更新state，实现依次渲染的需求。如果第二个请求需要用到第一个接口返回的参数，直接从pcr1Res中取值传入第二个请求的配置即可。
• 修复无效配置：移除了请求头中Access-Control-Allow-Origin字段，该字段是后端返回的响应头，前端请求时携带没有作用，反而可能触发跨域校验失败。补全了auth配置的占位提示，你需要替换为实际的接口认证账号密码，否则会导致请求鉴权失败。
• 完善渲染逻辑：补全了map方法的返回内容，你需要根据实际接口返回的字段名调整<td>中绑定的属性，避免渲染空白内容。

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