Редактируемая сетка данных MUI X со строками и столбцами, поступающими из серверной части
На этой странице — https://mui.com/x/react-data-grid/editing/ — команда DataGrid разместила пример того, как создать DataGrid со столбцом «Действия», содержащим кнопки «Редактировать», «Сохранить». , Отмена и Удалить.
Это именно то, чего я пытаюсь достичь, но не могу. По сути, в их примере строки и столбцы DataGrid жестко закодированы в источнике TS. Мне нужно, чтобы они исходили из свойств объекта, который сопоставлен с файлом JSON, поступающим из серверной части, — вот и все. У меня есть асинхронный метод getData в другом файле, который возвращает объект со свойствами строк и столбцов – как мне вызвать этот метод вместо того, чтобы полагаться на жестко запрограммированные объекты строк и столбцов.
Я очень новичок в React. Я пытался использовать комбинацию useEffect, useState, useMemo, но ничего не работало. В конце концов сетка перестает работать, например. нажатие кнопок «Изменить» приводит к тому, что браузер сообщает «Страница не отвечает».
Ответы 1
Сначала импортируйте эту функцию getData для просмотра основного файла, в котором вы хотите ее использовать, затем используйте хук useEffect() без каких-либо зависимостей (чтобы функция запускалась только при первой загрузке страницы), затем создайте объект useState для хранения данных, которые ваша функция getData() возвращается. И просто сопоставьте это состояние с Data Grid.
Если вы хотите выполнять операции CRUD с этими строками, убедитесь, что все они имеют уникальный идентификатор, связанный с ними, и все, создайте функции для редактирования, удаления с обязательным идентификатором параметра и измененными данными и отправьте их на серверную часть для проверки и изменения.
СОВЕТ: используйте модель MUI, когда вы нажимаете на любые кнопки, такие как «Редактировать», «Удалить» или что-то еще, что вы хотите сделать, просто создайте новый useState, чтобы отслеживать состояние этой модели, const [open, setOpen] = useState(false);
Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.