Как использовать перехватчики реакции, чтобы проверить реквизиты и отобразить нужный компонент? (HOC)

Question

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

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>;
  };
};

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

Answer 1

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

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

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

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);