Где должен быть размещен мой запрос `fetch` в моем приложении React без необходимости передавать данные между дочерним и родительским компонентами?

Question

Я сейчас работаю над проектом, где у меня есть App.jsx и другие мои компоненты inputComponent и articleComponent. App.jsx содержит как мой inputComponent, так и мой articleComponent. Однако я написал, что запрос fetch находится в пределах inputComponent.

В этом случае мой articleComponent сильно зависит от данных, полученных из запроса fetch, поэтому я думая, возможным решением было бы переместить fetch с inputComponent на articleComponent. Другой - использовать обратные вызовы для передачи данных от дочернего компонента родительскому компоненту. Однако, основываясь на некоторых ответах, которые я читал здесь и в Интернете, кажется, что этот метод передачи данных от дочернего компонента к родительскому также является анти-шаблоном React.

Я также думаю, что * Вызов 1018 * в идеале не должен быть на App.jsx, но не стесняйтесь поправлять меня, если я ошибаюсь.

В идеале мне нужны данные, полученные из вызова fetch (который приходит из представления пользовательского ввода в inputComponent), чтобы его можно было передать в качестве реквизита в ArticleComponent, чтобы я мог отображать статьи с правильными данными после их загрузки с моего сервера. Каким будет способ «React» сделать это, а также лучший способ в целом?

Answer 1

Как сказал @misternobody, «нормальный» способ - передать данные потомкам в качестве реквизита, и да, если состояние родителя изменится - он повторно отрендерит всех своих потомков (это идея React).

Таким образом, вы должны передать свой ввод от inputComponent до App (с использованием обратного вызова, переданного как опора), fetch внутри вашего App, а затем передать ответ на ArticleComponent

Если по какой-то причине вы хотите избежать рендеринга компонента App в этом процессе, вам придется использовать ie. Redux и НЕ подключайте App к магазину. Затем, если вы правильно сопоставите состояние магазина и его диапатч с реквизитами в ваших «дочерних» компонентах, он должен работать так, как вы предполагали, не беспокоясь о App.

Answer 2

Обычно свойства, которые вы хотите использовать для всех дочерних элементов, находятся в родительском классе.

Я бы написал выборку прямо здесь и передал бы ее дочерним элементам в качестве свойств.