从 API 填充后无法编辑 MUI TextFields

Question

我试图让 MUI TextFields 在从 API.

中填充后可编辑

TextFields 正在成功填充。

我试过使用一种 onChange 方法，它只允许在 TextField 中输入一个额外的字符，然后立即被原始数据覆盖。

这是我的 API 电话：

const params = useParams();
const [details, setDetails] = useState('');

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

函数：

function IntakeDetails() {
    const params = useParams();
    const [details, setDetails] = useState('');

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

    useEffect(() => {
        fetchDetails();
    }, []);

    return (
        <Container maxWidth="xl">
            <Box>
                <h3> Intake Details </h3>
            </Box>
            <Box className="details-form">
                {details['fields']?.map((row) => (
                    <TextField
                        className="text-field"
                        value={row['Value'] || ''}
                        onChange={(e) => {
                            setDetails((prev) => {
                                return { ...prev, row: e.target.value };
                            });
                        }}
                        variant="outlined"
                        margin="normal"
                        label={row['FieldName']}
                    />
                ))}
            </Box>
        </Container>
    );
}

来自 API 的 JSON 响应如下所示：

{
  "Id": 1,
  "IntakeID": 1234,
  "Title": "title",
  "Status": "Cancelled",
  "TaxonomyID": null,
  "ModifiedBy": "Doe, Jane",
  "UpdateDate": "Jan  9 2020 12:00AM",
  "questions": "google.com",
  "actions": "google.com",
  "sizing": "google.com",
  "fields": [
    {
      "FieldId": 2,
      "FieldName": "Type",
      "FieldType": "Select",
      "Value": "Sandbox",
      "Choices": [
        "Option1",
        "Option2",
        "Option3",
        "Option4",
        "Option5"
      ]
    },
    {
      "FieldId": 3,
      "FieldName": "Class",
      "FieldType": "Select",
      "Value": "Run",
      "Choices": [
        "Option1",
        "Option2",
        "Option3",
        "Option4",
        "Option5",
        "Option6",
        "Option7"
      ]
    }
}

Answer 1

此答案由 Mujeeb Qureshi 在对此问题的评论中提供。

我之前的 onChange 尝试只允许在被原始数据覆盖之前将一个字符添加到文本字段。

下面Mujeeb Qureshi提供的方法可以让TextField中的数据自由改变。

onChange={(e) => { setDetails((prev) => { return { ...prev, IntakeID: e.target.value }; }); }}

从 API 填充后无法编辑 MUI TextFields

Unable to edit MUI TextFields after populating from API

javascript

reactjs

material-ui