Повторно визуализировать компонент React и отображать новые данные при изменении данных в MongoDB
Мое приложение React использует модальное окно для создания, обновления и удаления данных, полученных из mongodb.
Это моя структура компонентов:
index.js
- выполнение вызова fetch для извлечения данных
- передача данных в качестве реквизита компоненту администратора (компонент администратора — это маршрут)
компонент администратора
- отображение содержимого данных на странице в сетку
- открытый модальный компонент
модальный компонент
- создавать/обновлять/удалять данные с помощью формы и выполнять вызов выборки
Я хочу, чтобы компонент администратора обновлялся и отображал созданные/обновленные/удаленные данные сразу после внесения изменений в модальное окно.
Я знаю, что обычно вы бы отображали данные как состояние, а затем изменяли бы это, чтобы обновить компонент и показать новые данные. В моем случае эти данные передаются в качестве поддержки компоненту администратора. из index.js, который извлекает данные. Я подумал, что другим потенциальным способом обновления компонента будет создайте хук состояния isUpdated и перейдите в модальное окно и переключите его значение, но это, похоже, не сработало.
Ответы 2
Вы можете попытаться добавить обновления в ваш компонент в режиме реального времени, чтобы любые изменения в данных отражались без необходимости принудительного повторного рендеринга ваших компонентов.
Вы можете использовать потоки для получения обновлений в вашей базе данных. Есть страница с хорошим туториалом:
Это имело довольно простое решение. Я смог решить эту проблему, установив данные, переданные в качестве реквизита, компоненту администратора в хуке состояния, а затем передайте переменную и функцию установки модальному модулю. В модальном режиме создайте новый объект с данными, собранными из формы, и используйте функцию установки, чтобы поместить новый объект данных в массив хука, и я получил желаемый результат. Спасибо и другим ответившим.
Должен ли
index.jsсделать вызов? В идеале вы должны убрать как можно больше логики изindex.jsи переместить ее в соответствующие компоненты. Вы можете передавать реквизиты изadminвmodal, а затемmodalобновлять реквизиты после вызовов API. Подобно тому, как вы передаете свойство, вы можете передать функцию от родителя к дочернему элементу, который изменяет ее.