Обновить родственный компонент на мутации?

Question

Давайте предположим, что у меня есть следующая структура:

<div> 
    <Form /> 
    <List /> 
</div> 

Текущая настройка: запрос в <List /> компонента и мутации в <Form /> компоненте. Поскольку <Form /> не имеет запроса, getFatQuery не может сделать, это сравнивает магию и возвращает clientMutationId, что в конечном итоге означает, что данные списка не обновляются без обновления страницы.

Как я могу сделать эту работу? Мне нужен отдельный компонент формы, потому что я хочу сделать мутацию в модальной форме. Должен ли я сам делать мутацию в <List /> и «транспортировать» данные от <Form /> до <List />?

У меня есть много аналогичных ситуаций, когда я хочу вставить данные (компонент формы) в отдельный компонент, какова стратегия для этих ситуаций?

Answer 1

Вы пытаетесь сделать управление государством с помощью React, которое, как вы заметили, может ввести в заблуждение, поскольку нет простого способа «передавать данные вокруг» в вашей иерархии.

Общим решением является наличие родительского компонента для хранения данных, и ваши компоненты Form иреагируют на эти данные, изменяя их только через обратные вызовы, переданные из этого родительского компонента.

Другим распространенным решением является добавление Redux в приложение для обработки данных состояния уровня приложения. Это позволяет хранить все данные в одном объекте, который называется store, что позволяет любому компоненту подписаться на изменения, что устраняет необходимость в том, что родительский компонент выполняет передачу данных.