如何在React中展示服务器返回的嵌套对象格式PDF链接？

我来帮你搞定这个React里展示嵌套PDF链接的问题，两种方法任你选：

方法一：直接遍历嵌套对象展示链接 #

不需要提前转换结构，直接用Object.entries()遍历tickets的外层和内层键值对即可，同时可以处理空链接的情况：

import React from 'react';

const TicketList = ({ tickets }) => {
  return (
    <div className="ticket-container">
      <h3>PDF票据列表</h3>
      {Object.entries(tickets).map(([outerId, innerObj]) => (
        <div key={outerId} className="ticket-group">
          <p>分组ID: {outerId}</p>
          {Object.entries(innerObj).map(([innerId, pdfUrl]) => (
            <div key={innerId} className="ticket-item">
              {pdfUrl ? (
                <a href={pdfUrl} target="_blank" rel="noopener noreferrer">
                  查看票据 {innerId}
                </a>
              ) : (
                <span className="empty-ticket">票据 {innerId} 暂无链接</span>
              )}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

// 使用示例（假设你的响应数据存在response变量中）
const response = { "response_code": 200, "tickets": { "3": { "117": "http://....../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf" }, "4": { "118": "http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf" }, "5": { "119": "http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf" }, "6": { "120": "http://.../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf" }, "7": { "121": "" }, "8": { "122": "http://..../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf" } } };

// 在组件中调用
// <TicketList tickets={response.tickets} />

方法二：先转换为数组再展示 #

如果觉得嵌套遍历太麻烦，可以先把tickets转换成结构更扁平化的数组，后续展示会更直观：

import React from 'react';

const TicketList = ({ tickets }) => {
  // 将嵌套对象转换为数组
  const ticketArray = Object.entries(tickets).flatMap(([outerId, innerObj]) => {
    return Object.entries(innerObj).map(([innerId, pdfUrl]) => ({
      outerId,
      innerId,
      pdfUrl
    }));
  });

  return (
    <div className="ticket-container">
      <h3>PDF票据列表</h3>
      <ul>
        {ticketArray.map((ticket) => (
          <li key={ticket.innerId}>
            {ticket.pdfUrl ? (
              <a href={ticket.pdfUrl} target="_blank" rel="noopener noreferrer">
                分组{ticket.outerId} - 票据{ticket.innerId}
              </a>
            ) : (
              <span>分组{ticket.outerId} - 票据{ticket.innerId} 暂无链接</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

// 使用示例同上
// <TicketList tickets={response.tickets} />

两种方法都能完美展示你的PDF链接，第二种数组格式的好处是后续如果需要对票据数据做筛选、排序等操作会更方便~

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