Как условно визуализировать компонент, использующий хуки, я получаю сообщение об ошибке, что компонент, использующий хуки, не может сделать условно визуализацию

Question

У меня есть компонент, где, если его состояние загрузки равно true, он возвращает разметку загрузки, если id false, он возвращает что-то еще.

Но я получаю ошибку:

React Hook is called conditionally. React Hooks must be called in the exact same order in every component render.

Какой правильный способ исправить это?

Мой компонент:

  const store = React.useContext(StoreContext);
  const [loading, setLoading] = useState(false)
  if(loading) {
    return <p>Loading...</p>
  }
  return useObserver(() => (
    <div className="pa2">
      <div className="flex">
        {store.restaurantResults[store.selectedFood] &&
          store.restaurantResults[store.selectedFood].map((rest, i) => {
            return (
              <div key={i} className="pa2">
                <img src={rest.image_url} alt="restuarant" />
                <p>Reviews{rest.review_count}</p>
              </div>
            );
          })}
      </div>
    </div>
  ));
};```

Answer 1

Поскольку useObserver() является ловушкой, вы должны вызывать ее при каждом рендере, вы не можете ее пропустить условно.

Один из вариантов - переместить условие в обратный вызов ловушки, если это S вариант для вас:

  return useObserver(() => (
    loading 
      ? <p>Loading...</p>
      : <div className="pa2">
          <div className="flex">
            {store.restaurantResults[store.selectedFood] &&
             store.restaurantResults[store.selectedFood].map((rest, i) => {
               return (
                 <div key={i} className="pa2">
                   <img src={rest.image_url} alt="restuarant" />
                   <p>Reviews{rest.review_count}</p>
                 </div>
               );
             })}
          </div>
        </div>
  );
};