反应挂钩条件渲染

Question

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

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

您应该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（使用大写字母B）。