Есть ли способ убедиться, что дочерние компоненты запускают действия после родительских компонентов? - PullRequest
Новая
       30

Есть ли способ убедиться, что дочерние компоненты запускают действия после родительских компонентов?

1 голос
/ 15 мая 2019

У меня возникают проблемы при попытке запустить действие в хуке useEffect, определенном в точке входа для моего приложения.Ниже в дереве компонентов я использую ловушку useEffect для выполнения вызовов API, которые используют критически важную часть данных, извлекаемых в описанной мной точке входа.Кажется, я бы не хотел переносить выборку этого важного фрагмента данных в каждый дочерний компонент, который в этом нуждается.Использую ли я здесь анти-паттерн?

Единственный другой вариант, о котором я могу подумать, - это не вызывать API до тех пор, пока этот фрагмент данных не будет получен, но для целей повторного использования это не очень хороший способ сделать что-то ипредоставляет множество потенциальных проблем.

Дерево компонентов выглядит следующим образом: 

<App> <-- useEffect hook retrieves crucial piece of data
    <Child /> <-- useEffect hook calls API with data
</App>

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

1 Ответ

0 голосов
/ 15 мая 2019

Вы должны сделать следующее.

  1. Создать контекст для предоставления информации о родительской инициализации дочерним компонентам. 
const ParentInitializeContext = React.createContext(false);
Создайте логическую переменную состояния isInitialized в родительском компоненте и установите для нее значение true, когда родительский компонент будет инициализирован.Вы также должны предоставить isInitialized для контекста: 
function App(props) {
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    //here you retreive a crucial piece of data and then call setIsInitialized(true);
  }, []);
  return (
    <ParentInitializeContext.Provider value={isInitialized}>
      {props.children}
    </ParentInitializeContext.Provider>
  );
}
Создать собственный хук для вызова функций при инициализации родительского компонента: 
function useEffectWhenParentInitialized(fn, inputs = []) {
  const isParentInitialized = useContext(ParentInitializeContext);
  useEffect(() => {
    if (isParentInitialized) {
      fn();
    }
  }, [...inputs, isParentInitialized]);
}
Измените useEffect перехватывать дочерние компоненты на useEffectWhenParentInitialized.

Полный пример можно посмотреть здесь: https://codesandbox.io/s/5volk3o2ol

...