Ре-рендеринг дочерних компонентов React

Question

Можно ли повторно визуализировать одного или обоих дочерних компонентов компонента, если один из них обновляется? У меня есть компонент, который выглядит следующим образом:

const ContributeBody = () => (
  <StyledContributeBody>
    <LastThreePages />
    <ContributeForm />
  </StyledContributeBody>
);

Компонент ContributeForm собирает данные и вызывает функцию API, которая добавляет данные в мою базу данных Fauna DB.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *}}}}}} * * НЕ САМА * *. *.

Я ищу способ перезагрузить LastThreePages после того, как ContributeForm отправит данные в данные в базу данных Fauna DB.

В настоящее время я не использую Redux или GraphQL. Я использую FQL.

Является ли модель потока ответ здесь?

Answer 1

Мое предложение заключается в том, что StyledContributeBody (или выше) управляет чтением и отправкой данных, а затем через React Context (рекомендуется) или Redux или путем передачи данных в качестве подпорки вы передаете данные дочерним компонентам.

Когда данные считываются и изменяются, вы можете инициировать обновление sh других данных, которое будет распространяться на дочерние компоненты.

Answer 2

Насколько я знаю, реагирует на рендеринг компонента, когда изменяется его состояние или свойство. Я предполагаю, что передача некоторого фиктивного свойства будет работать (я не проверял это):

const ContributeBody = () => (
  const [rev, setRev] = useState((new Date()).valueOf());

  <StyledContributeBody>
    <LastThreePages rev={rev} />
    <ContributeForm onSuccess={() => {setRev((new Date()).valueOf());}} />
  </StyledContributeBody>
);

Вызовите onSuccess, когда необходимо повторно сделать