React JS中迭代对象数组时map方法报错问题排查

错误原因 #

你声明的sample是对象数组类型，但createURL函数的入参逻辑是按照单个对象设计的：你直接将整个数组传入createURL时，函数内读取re.par会返回undefined，后续调用Object.entries(undefined)就会触发类型错误。

修复方案 #

• 方案1：传入数组内的单个对象
  调整调用代码即可：

  console.log(createURL(sample[0]));
  

• 方案2：适配数组输入处理所有元素
  如果你的业务需要遍历数组中所有对象生成查询字符串，可以修改函数逻辑：

  const createURL = (reList)=> {
    return reList.map(re => {
      // 拼接查询参数时建议加encodeURIComponent转义，避免特殊字符导致URL异常
      const q = Object.entries(re.par)
        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join("&");
      return `${re.samplePath}?${q}`;
    })
  }
  console.log(createURL(sample));
  

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