React Native调用REST API时提取动态名称对象中文件名的实现方法

我明白你的困扰了——API返回的files是个键名不固定的对象，每个键对应一个包含filename等属性的文件对象，直接通过.filename肯定拿不到值对吧？咱们可以通过遍历对象的值来解决这个问题，同时还能收集完整的对象列表。

核心思路 #

因为r.data[n].files是对象而非数组，它的键名会动态变化，但每个键对应的值都是结构一致的文件对象。我们可以用Object.values()方法把这个对象转换成包含所有文件对象的数组，这样就能轻松遍历每个对象，提取filename并保存完整对象了。

修改后的完整代码 #

const getGists = async () => {
  try {
    const response = await axios.get(`https://api.github.com/gists/public?per_page=30`);
    // 初始化两个数组，分别存储所有filename和完整文件对象
    const allFilenames = [];
    const allFileObjects = [];

    // 遍历返回的每个gist项，用response.data.length代替固定30，避免越界
    for (let item of response.data) {
      // 将files对象转换为值数组，忽略动态键名
      const fileObjects = Object.values(item.files);
      // 遍历每个文件对象，收集所需数据
      fileObjects.forEach(file => {
        allFilenames.push(file.filename);
        allFileObjects.push(file); // 保存完整对象，方便查看message等信息
      });
    }

    // 按需使用收集到的数据
    console.log("所有filename列表:", allFilenames);
    console.log("所有完整文件对象:", allFileObjects);
  } catch (e) {
    console.log("ERROR", e);
  }
};

关键细节说明 #

• 改用try/catch替代链式.then/.catch，让异步代码更简洁易读（如果习惯链式调用，逻辑完全可以平移过去）。
• 用Object.values(item.files)跳过动态键名的干扰，直接获取所有文件对象的数组。
• 用for...of遍历response.data，比传统for循环更直观，还能避免固定30次循环导致的越界问题（比如API返回结果不足30条时）。
• 两个数组allFilenames和allFileObjects分别存储你需要的文件名和完整文件对象，后续可以直接用于展示或其他业务逻辑。

这样修改后，不管API返回的files里有多少个动态命名的对象，你都能提取到所有filename，同时也能保留完整的对象信息用于查看message等内容～

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