Реактивные крючки условного рендера

Question

У меня есть функциональный компонент реагирования, который использует пользовательский хук useTimer . Этот компонент получает данные от API (через хранилище примитивов).

function RenderRespond(order) {
  if(order === null) return;
  const {
    buyerName,
    offerDuration,
  } = order;
  const {
    seconds,
    minutes,
  } = useTimer(offerDuration);
  return(
    <div>
      {BuyerName}
      {minutes}:{seconds}
    </div>
  );
}

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

Answer 1

Вы должны позвонить useTimer перед оператором if.

Примерно так:

function RenderRespond(order) {
  const {
    buyerName,
    offerDuration = '', // not sure what the default value will be, but you can change it for your needs
  } = order || {};
  const {
    seconds,
    minutes,
  } = useTimer(offerDuration);

  if(order === null) return null;
  return(
    <div>
      {BuyerName}
      {minutes}:{seconds}
    </div>
  );
}

Если вы посмотрите на документы , причина этого состоит в том, чтопотому что if(order === null) return предотвратит вызов хука, но он будет ожидать его вызова;

Наблюдения

Может быть, у вас есть опечатка?

Вы уничтожаете buyerName, но делаете BuyerName (с большой буквы).