合并两个API返回数组筛选指定字段时遇TypeError问题求助

错误原因 #

你触发的TypeError: Cannot set properties of undefined (setting 'value')，是因为skills是初始为空的ref数组，循环中skills[i]对应的元素不存在（值为undefined），自然无法给它的.value属性赋值。

修正方案 #

方案一：直接生成新数组赋值（推荐）

通过map方法直接将两个数组合并成目标数组，然后赋值给skills.value，代码更简洁：

const skills = ref([]);
const entries = axios.get(`https://cdn.contentful.com/spaces/${space_id}/environments/${environment_id}/entries?access_token=${access_token}`);
const assets = axios.get(`https://cdn.contentful.com/spaces/${space_id}/environments/${environment_id}/assets?access_token=${access_token}`);
axios
  .all([entries, assets])
  .then(
    axios.spread((...responses) => {
      const responseEntries = responses[0].data.items.map(
        (item) => item.fields
      );
      const responseAssets = responses[1].data.items.map(
        (item) => "https:" + item.fields.file.url
      );
      
      // 新增长度校验，避免数组越界
      if (responseEntries.length !== responseAssets.length) {
        console.warn('entries与assets数量不匹配，合并操作终止');
        return;
      }

      // 直接生成合并后的数组并赋值给ref的value
      skills.value = responseEntries.map((entry, index) => [
        responseAssets[index],
        entry.title,
        entry.list,
        entry.description
      ]);
    })
  )
  .catch((error) => console.log(error));

方案二：使用push方法填充数组

如果习惯用循环，直接往skills.value中push新元素即可，不需要访问不存在的数组项：

const skills = ref([]);
const entries = axios.get(`https://cdn.contentful.com/spaces/${space_id}/environments/${environment_id}/entries?access_token=${access_token}`);
const assets = axios.get(`https://cdn.contentful.com/spaces/${space_id}/environments/${environment_id}/assets?access_token=${access_token}`);
axios
  .all([entries, assets])
  .then(
    axios.spread((...responses) => {
      const responseEntries = responses[0].data.items.map(
        (item) => item.fields
      );
      const responseAssets = responses[1].data.items.map(
        (item) => "https:" + item.fields.file.url
      );
      
      if (responseEntries.length !== responseAssets.length) {
        console.warn('entries与assets数量不匹配，合并操作终止');
        return;
      }

      for (let i = 0; i < responseEntries.length; i++) {
        // 直接向ref的数组中push元素
        skills.value.push([
          responseAssets[i],
          responseEntries[i].title,
          responseEntries[i].list,
          responseEntries[i].description,
        ]);
      }
    })
  )
  .catch((error) => console.log(error));

额外注意 #

必须保证responseEntries和responseAssets的长度一致，否则会出现数组越界或者部分数据缺失的问题，建议加入长度校验逻辑。

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