如何從 JSON 名稱/值對中提取名稱並附加到 TextField

Question

我有如下所示的 JSON：

{
  "Id": 1,
  "Title": "Data about John Doe",
  "Comments": "Some text goes here",
  "UpdatedBy": "John Doe",
  "UpdateDate": "Apr 14 2022 12:00AM"
}

我想將此 JSON 映射到 MUI TextFields，名稱/值對的名稱作為 TextField 標簽，值作為 TextField 值。 我還需要能夠編輯這些值。

這是我的數據數組：

const [singleSizing, setSingleSizing] = useState("");
const fetchSizingData = async (intake_id, sizing_id) => {
  setSingleSizing(
    await fetch(`/api/fiscalyears/FY2023/intakes/${params.id}/details/questions`).then((response) =>
                response.json()
            )
  );
};

這些是我正在使用的文本字段：

<TextField
  value={}
  label={}
/>

Answer 1

假設singleSizing是一個 JSON 對象。 如果沒有，請先映射：

您可以使用Object.entries從對象中提取鍵/值對，然后在條目上使用.map()來創建組件。

// ...

  return Object.entries(singleSizing).map(sizingEntry => {
      const [label, value] = sizingEntry; // e.g. ['Title', 'Data about John Doe']
      
      return <TextField label={label} value={value} />
  });

// ...

要編輯這些值，請查看 MUI 表單組件或其他表單庫，並考慮更改狀態的形狀以使更新更容易。

Answer 2

您可以使用.map和Object.keys

 {
     
      
        Object.key(singleSizing).map(key => ( 
          <TextField 
              value = {
                obj[key]
              }
              label = {
                key
              }
            />
        ))
      
 }