将数组转换为json的最佳选项是什么

Question

这是我的数组var tags = ["Shisha rauchen", "Indischecurryfürze"]

我在尝试

import React from 'react'
function Interests(tags) {
console.log(tags)
var myJson = JSON.parse(tags);
console.log(myJsonString)
return (
<div>
hi
{myJson.map((tag, index) => {
return (
{tag}
);
})}
</div>
)
}
export default Interests

但我得到以下错误TypeError: myJsonString.map is not a function

那么，将数组tags转换为json的最佳选项是什么，或者我可以使用mapmethpd

Answer 1

错误可能是因为您没有在映射中返回元素。不能直接渲染标记。Trt this

import React from 'react'
function Interests(tags) {
console.log(tags)
return (
<div>
hi
{tags.map((tag, index) => <span key={index}{tag}</span>)}
</div>
)
}
export default Interests

Answer 2

您所需要做的就是删除这一行：

var myJsonString = JSON.stringify(tags);

并执行：

tags.map

这将使您的数组成为一个字符串。"".map将抛出一个错误。

点击此处了解更多关于JSON.stringify的信息。

Answer 3

你的"myJsonString"它现在是一个字符串，所以您没有方法"地图"；在字符串上。为什么你不这样做：

import React from 'react'
function Interests(tags) {
return (
<div>
hi
{tags.map((tag, index) => {
return (
{tag}
);
})}
</div>
)
}
export default Interests

你到底想要什么结果？

Answer 4

正如我所提到的，这里不需要JSON。只要使用现有的数组，就没有理由将其转换为数组的字符串表示形式(JSON.stringify就是这样做的(。

两件事：

1. 如果tags是道具，则需要从调用组件函数的道具对象中选择该道具，或者使用destructuring：

   function Interests({tags})
   // −−−−−−−−−−−−−−−−^−−−−^
   

   或者使用不同的名称(如props(，然后在需要标记时使用props.tags。

2. 如果您的目标是将所有标签输出为文本，也许用空格分隔，那么您所需要做的就是{tags.join(" ")}。它将数组与中间的空格连接在一起，并将其输出到正在渲染的组件(在您的示例中为div(。

综合起来：

function Interests({tags}) {
return (
<div>
hi {tags.join(" ")}
</div>
);
}

实例：

function Interests({tags}) {
return (
<div>
hi {tags.join(" ")}
</div>
);
}
ReactDOM.render(
<Interests tags={["Shisha rauchen", "Indischecurryfürze"]} />,
document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>