【问题标题】：React hooks conditional renderReact hooks 条件渲染
【发布时间】：2019-07-01 13:51:55
【问题描述】：

我有一个使用自定义钩子 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的情况下渲染这个组件，代码抛出钩子不能有条件渲染的错误，如何实现呢？

【问题讨论】：

标签： reactjs react-hooks

【解决方案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）。

【讨论】：

但是如果order为null，访问buyerName会报错。
@johnnash 我添加了order || {}，现在你的破坏可以正常工作了。我还添加了offerDuration = ''，所以当你在useTimer 中使用它时它不会是undefined，但你可以将它更改为你需要的。我只添加了空字符串，因为我不知道useTimer中使用了什么。