时间戳

首页 > 解决方案 > 使用 useState 来防止重新声明和重新运行

reactjs - 使用 useState 来防止重新声明和重新运行

问题描述

在进行任何操作之前，我正在清理控制台中的警告，并且我有一堆非常相似地拼凑在一起（结构）的组件。这些值特定于每个组件。似乎试图在 if 语句中设置 State 并不是一个好主意。

重新声明的原始解决方案：

  const [value, setValue] = React.useState({
    quoteId: false,
    quotePage: false,
    quoteExcerpt: false,
    quoteComment: false,
  });

  var allEmpty = true;

  if (
    value.quoteId &&
    value.quotePage &&
    value.quoteExcerpt &&
    value.quoteComment === false
  ) {
    var quoteSect = false;
    var allEmpty = true;
  }
  if (
    value.quoteId ||
    value.quotePage ||
    value.quoteExcerpt ||
    value.quoteComment === true
  ) {
    var allEmpty = false;
    var quoteSect = true;
  }

关闭，但由于以下原因导致解决方案损坏 Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.：

  const [empty, setEmpty] = React.useState(true)

  const [value, setValue] = React.useState({
    quoteId: false,
    quotePage: false,
    quoteExcerpt: false,
    quoteComment: false,
  });

  if (
    value.quoteId &&
    value.quotePage &&
    value.quoteExcerpt &&
    value.quoteComment === false
  ) {
    var quoteSect = false;
    setEmpty(true);
  }
  if (
    value.quoteId ||
    value.quotePage ||
    value.quoteExcerpt ||
    value.quoteComment === true
  ) {
    setEmpty(false);
    var quoteSect = true;
  }

标签： reactjsreact-hooksuse-state

解决方案

“empty状态”似乎完全来自value状态，这意味着它可能不属于状态。渲染循环是由不断在组件主体中设置状态作为无意的副作用引起的。

我认为empty可以只是为每个渲染周期设置一个局部变量，从当前value状态值导出。

const [value, setValue] = React.useState({
  quoteId: false,
  quotePage: false,
  quoteExcerpt: false,
  quoteComment: false,
});

const empty = (
  value.quoteId &&
  value.quotePage &&
  value.quoteExcerpt &&
  !value.quoteComment
) || (
  value.quoteId ||
  value.quotePage ||
  value.quoteExcerpt ||
  value.quoteComment
);

如果您需要更稳定empty的参考，请使用useMemo挂钩。

const empty = useMemo(() => {
  return (
    value.quoteId &&
    value.quotePage &&
    value.quoteExcerpt &&
    !value.quoteComment
  ) || (
    value.quoteId ||
    value.quotePage ||
    value.quoteExcerpt ||
    value.quoteComment
  );
}, [value]);

推荐阅读