反应挂钩条件渲染

Question

我有一个功能性的react组件，它使用自定义钩子 useTimer 。该组件从API（通过redux存储）接收数据。

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

我只想在order不为null的情况下渲染此组件。代码抛出了无法有条件渲染钩子的错误，我该如何实现？

Answer 1

您应该在if语句之前调用useTimer。

像这样：

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

如果您查看the docs，则发生这种情况的原因是因为if(order === null) return会阻止钩子被调用，但是会期望它被调用；

观察

也许您有错字？

您正在破坏buyerName，但渲染BuyerName（用大写字母B）。