首页 > 解决方案 > 解决了 React,将对象作为参数传递给页面,不在 html 中显示,但会在控制台中

问题描述

我只是将对象从一页传递到另一页。然后我获取对象并循环遍历它以在 html 中显示它。它不会在 html 中显示任何内容,但会 console.log 它。这是代码。query.tags 是一个数组。我尝试使用状态来进行测试,但它并没有改变任何东西。

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 中。解决了

标签: reactjs

解决方案


您的标签函数没有返回任何内容。尝试在 map 函数之前返回 add。

尝试:-

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


推荐阅读