Как использовать реагирующие крючки, чтобы проверить реквизит и сделать правильный компонент? (HO C)

Question

Изначально в реквизитах нет свойства страна . Итак, мне нужно показать сообщение о загрузке, если в props отсутствует свойство country , но проблема в том, что он продолжает отображать элемент загрузки даже в свойстве country существует. Так что через некоторое время появляется свойство country , и ho c должен это проверить. Я не уверен, что делаю это правильно.

const loadingComponent = (WrappedComponent) => {
  return (props) => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      if (props.country) return setLoading(false);
    }, [props]);

    return !loading ? <WrappedComponent {...props} /> : <p>Loading ...</p>;
  };
};

Я стараюсь избегать использования компонентов порядка классов. Или какие-нибудь альтернативные способы создания загрузки ho c? Спасибо

Answer 1

В этом случае вам не нужно состояние. Если реквизит существует, выполните рендеринг компонента, если не рендеринг загрузки:

const loadingComponent = WrappedComponent =>
  props => 
    props.country ? 
      <WrappedComponent {...props} /> 
      : 
      <p>Loading ...</p>;

Я бы создал более общий c компонент, который принимает предикат для проверки необходимости загрузки:

const loadingComponent = (predicate, WrappedComponent) =>
  props => 
    predicate(props) ? 
      <WrappedComponent {...props} /> 
      : 
      <p>Loading ...</p>;

И тогда вы можете использовать это так:

const Wrapped = (props => 'country' in props, ComponentX);

Или проверить другие вещи

const Wrapped = (({ a }) => a < 5, ComponentY);