我应该存储标签中使用的文本吗

Question

我对web开发很陌生，目前我正在使用React JS开发前端。

所以我有一个基于JSON数据动态呈现标签的组件，

JSON如下所示：

data:{
name:"test123",
toDoActivity:"coding",
}

这是我渲染标签的代码

Object.entries(data).map((aData)=>{
return <div>
<label>{aData[0]} : {aData[1]}<label>
</div>
})

现在上面的代码将被呈现给

名称：test123

toDoActivity:编码

这里是代码沙盒：https://codesandbox.io/s/confident-microservice-s0sgy?file=/src/App.js

数据被正确地呈现，但我想要的是用用户友好的文本(如(来呈现数据

名称：test123

待办事项：编码

我有一个想法，在JSON中创建一个新的属性"标签文本"，使其变成这样：

data:{
name:{value:"test123",text:"Name"},
toDoActivity:{value:"coding",text:"To Do"},
}

但我不知道这样存储标签的文本是否是个好主意，所以我来这里征求你的建议或更好的解决方案，提前感谢

Answer 1

您应该使用Object.values()函数。这是显示您想要的结果的正确方式：

import React from "react";
import "./styles.css";
const theData = {
name: { value: "test123", text: "Name" },
toDoActivity: { value: "coding", text: "To Do" }
};
export default function App() {
return Object.values(theData).map((aData) => {
return (
<div>
<label>
{aData.text} : {aData.value}
</label>
</div>
);
});
}

这是您的代码版本。

Answer 2

Object.values和Object.entries在这里只是令人困惑。使用对象数组作为数据：

import React from "react";
import "./styles.css";
const theData = [
{ value: "test123", text: "Name" },
{ value: "coding", text: "To Do" }
];
export default function App() {
return theData.map((entry) => {
return (
<div>
<label>
{entry.text} : {entry.value}
</label>
</div>
);
});
}