React页面间传递对象参数：console可输出tags数组但DOM无法渲染的原因解析（已解决）

嘿，我来帮你拆解下这个诡异的问题——核心原因其实是路由传递过来的query.tags并非真正的JavaScript数组！

你可能会疑惑：“我明明console.log能看到数组格式的内容啊？” 别急，仔细看一下console里的输出，是不是query.tags其实是个带引号的字符串？比如显示的是"[React,前端,组件]"，只是视觉上和数组很像而已。这种情况通常是路由在传递对象参数时，受URL参数类型限制，自动把数组序列化成了字符串，所以你拿到的query.tags本质是字符串，不是数组。

那为什么map没报错？因为字符串也有map方法，它会遍历字符串的每个字符，但你的Tag组件渲染单个字符可能没显示（或者你没注意到），更多时候是因为字符串的map返回的结果没有被正确识别为可渲染的React元素，导致DOM里看不到内容。

解决办法：把字符串转换成真正的数组 #

你需要先对query.tags做类型判断和转换，比如：

const { query } = useRouter();

// 解析tags，转成真正的数组
const parsedTags = (() => {
  if (Array.isArray(query.tags)) {
    return query.tags;
  }
  // 如果是JSON格式的字符串数组，比如"[\"tag1\",\"tag2\"]"
  if (typeof query.tags === 'string' && query.tags.startsWith('[') && query.tags.endsWith(']')) {
    try {
      return JSON.parse(query.tags);
    } catch (e) {
      console.error('解析tags失败', e);
      return [];
    }
  }
  // 如果是逗号分隔的字符串，比如"tag1,tag2,tag3"
  if (typeof query.tags === 'string') {
    return query.tags.split(',').filter(tag => tag.trim());
  }
  return [];
})();

// 存入state或者直接使用
const [stateTags, setStateTags] = useState(parsedTags);

return (
  <div>
    {stateTags.map((tag, index) => (
      <Tag key={index}>{tag}</Tag>
    ))}
  </div>
);

另外提一句，你之前写的那个tags函数其实有个小问题：里面的query.tags?.map结果没有被return出来，所以这个函数调用后会返回undefined，不过你渲染的时候没用到它，所以不是这次问题的关键。

总结一下：路由传递的参数容易被序列化，拿到后一定要先做类型校验和转换，别想当然以为是数组～

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