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

Question

我有两套JSON、套1和套2。 设置 1 (sizingData) 像这样映射到文本字段：

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) 类似，但我在文本字段中得到 [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 不能在这种情况下使用，因为仅当用户在 table 中选择包含 SizingId.

的行时才会显示数据

Answer 1

你有 [Object object]，因为 JS 在 Set2 上将一个对象转换为字符串，这是因为 data.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} /> );
        })}
    )
}

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

Nested JSON array displaying as [Object Object] in TextField

javascript

json

reactjs

material-ui