求解React，将对象作为params传递到页面，不在html中显示，但会在控制台中显示

Question

我只是将对象从一个页面传递到另一个页面。然后，我获取对象并循环浏览它，以html形式显示它。它不会在html中显示任何内容，但会console.log。这是代码。query.tags是一个数组。我试着使用state只是为了测试，但它并没有改变任何东西。

const {query} = useRouter();
    
    console.log(query.id, query.title, query.description, query.segment);
    const [stateTags, setStateTags] = useState(query.tags);
    const tags = () => {
        console.log(stateTags);
        console.log("new here--", query.tags);
        query.tags?.map((tag, index) => {
            console.log(tag)
            return (
                <Tag key={index}>{tag}</Tag>
            );
        }); 
    };
    return (
      <div>{query.tags?.map((tag, index) => {
                    return (
                        <Tag key={index}>{tag}</Tag>
                    );
                })}</div>
    );

有人能向我解释一下为什么它会显示在控制台中，但不会显示在dom/html中吗。已解决

Answer 1

您的标记函数没有返回任何内容。尝试返回映射前添加函数。

尝试：-

return query.tags?.map((tag, index) => (
  <Tag key={index}>{tag}</Tag>
));