嵌套JSON数组在TextField中显示为[Object Object]

Question

我有两组JSON，Set 1andSet 2．设置1(sizingData)被映射到这样的textFields:

const fillTextField = () => {
let result = [];
var keys = Object.keys(sizingHistory);
keys.forEach(function (key) {
result.push(sizingHistory[key]);
});
return( 
{result?.map((data) => {
return ( <TextField variant="outlined" value={data} /> );
})}
)
}

我想映射Set 2(sizingHistory)同样，但我在textField中获得[Object Object]，而不是SizingId&SizingComments。这是我尝试映射sizinhHistory:

const [sizingHistory, setSizingHistory] = useState("");
const fillHistoryTextField = () => {
let result = [];
var keys = Object.keys(sizingHistory["sizinghistory"]);
keys.forEach(function (key) {
result.push(sizingHistory["sizinghistory"][key]);
});
return (
{result?.map((data) => {
return ( <TextField variant="outlined" value={data} /> );
})}
)
}

1组

{
"SizingId": 20448,
"SizingComments": "This is a comment",
}

2组

{
"sizinghistory" : [
"SizingId" : 20448,
"SizingComments": "Old Comment",
]
}

sizingData&sizingHistory在它们自己的handleOpen函数中被调用。UseEffect不能在这种情况下使用，因为只有当用户在包含SizingId的表中选择一行时才会显示数据。

Answer 1

你有[Object Object]作为JS在Set2上转换对象到字符串，这是因为数据。seizingHistory是一个数组，你必须遍历它，然后遍历其中对象的键，以获得文本输入的所有数据。

这应该能得到你想要的

const [sizingHistory, setSizingHistory] = useState("");
const fillHistoryTextField = () => {
let result = [];
(sizingHistory["sizinghistory"]).forEach(element => {
const keys = Object.keys(element);
keys.forEach(function (key) {
result.push(element[key]);
});
});
return (
{result?.map((data) => {
return ( <TextField variant="outlined" value={data} /> );
})}
)
}