TextField not editable due to Uncaught TypeError: is not iterable

Question

我正在从 API 中提取数据并将其附加到显示它的 TextFields。我需要能够编辑 TextFields 中显示的数据，但是当我尝试编辑或向 TextFields 添加任何文本时，我得到了这个 Uncaught TypeError: prev.fields is not iterable。

这是填充 TextField 的方式：

{details["groups"]?.map((group) => {
    return (
        {group["fields"]?.map((row, index) => {
            return (
                <TextField
                    value={row?.Value || ""}
                    onChange={(e) => {
                        setDetails((prev) => {
                            const update = [...prev.fields];
                            update[index] = {
                                ...update[index],
                                Value: e.target.value,
                            };
                            return { ...prev, fields: update };
                        });
                    }}
                    label={row["FieldName"]}
                />
            );
        })}
    );
})}

这是我的 API 请求：

const fetchDetails = async () => {
    setDetails(await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details`)
        .then((response) => response.json()));
};

这是我的数据示例：

{
  "groups": [
    "GroupName": "Solution Details",
    "GroupOrder": 1,
    "fields": [
      {
        "FieldId": 19,
        "FieldOrder": 1,
        "FieldName": "Requesting Organization",
        "FieldType": "Text",
        "Value": "IT",
        "Choices": [
          null
        ]
      }
    ]
  ]
}

Answer 1

这个answer was provided by Chris G in his

TextField not editable due to Uncaught TypeError: is not iterable

TextField not editable due to Uncaught TypeError: is not iterable

javascript

json

reactjs

material-ui