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

Question

我正在清理控制台中的警告，然后再进行任何操作，并且我有一堆非常相似地倾斜在一起（结构化）的组件。这些值特定于每个组件。似乎尝试在 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;
  }

Answer 1

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

Answer 2

您好，首先您需要注意错误：重新渲染太多。 React 限制呈现的数量以防止无限循环意味着组件将始终重新检查自您直接在组件中添加逻辑以来状态是否发生变化。使用像这样的函数

      const checkEmpty =((Props)) => {

                      if(props ..){

              setState(prevState = !prevState)  ; 

              }

如果您希望在 useEffect(()=> checkEmpty(StateHere) , []) 中检查数据 onComponentDidmount [] 以避免死循环，请调用函数。好的，现在最好的做法是在 reducer 中添加该状态，并使用 redux hook useSelector 从那里获取你的状态，然后运行如上所述进行检查。主要是如果你使用后端或你定义的状态来自另一个容器以避免 useState 你可以用 redux 替换它并且它的动作 ext ...

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

using useState to prevent both redeclares and re-runs

reactjs

react-hooks

use-state