使用React useState避免变量重复声明与过多重渲染报错问题

问题根因 #

你遇到的两个问题本质原因如下：

1. 无限重渲染：setEmpty 是React状态更新方法，直接写在组件顶层判断逻辑中，每次组件渲染只要满足判断条件就会触发状态更新，状态更新又会触发组件重新渲染，形成死循环。且empty完全是由value状态计算得到的派生值，根本不需要单独声明为state，这是触发死循环的核心原因。
2. 变量重复声明：你用了var声明变量，由于var存在变量提升特性，同作用域内重复声明不会触发语法报错，但会导致逻辑混乱，换成const/let即可在语法层面规避该问题。
   另外你原代码的条件判断逻辑也存在错误：value.quoteId && value.quotePage && value.quoteExcerpt && value.quoteComment === false 只会判断quoteComment是否为false，前面三个字段实际判断的是是否为真值，和你预期的「四个字段全为false」的逻辑完全不符。

正确实现 #

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

// 直接通过现有状态计算派生值，无需额外声明state
const allEmpty = Object.values(value).every(item => item === false);
const quoteSect = !allEmpty;

// 如果需要在allEmpty变化时执行副作用（比如调用外部方法、触发请求等），用useEffect包裹
React.useEffect(() => {
  // 此处写需要响应状态变化的逻辑
  console.log('是否全为空：', allEmpty);
}, [allEmpty])

优化说明 #

• 移除冗余状态：所有完全由现有状态计算得到的派生值都不需要单独存为state，避免不必要的状态更新和渲染消耗。
• 用const声明派生变量：const声明的常量不允许重复声明，直接从语法层面解决变量重复声明问题，也避免了var变量提升带来的逻辑隐患。
• 修正判断逻辑：用Object.values+every方法判断所有字段是否全为false，相比手写多个&&/||判断更简洁，也避免了原写法的条件判断错误。
• 副作用逻辑统一用useEffect包裹：如果确实需要在派生值变化时执行操作，把逻辑放到useEffect中并填写对应依赖项，不会触发无限重渲染。

内容的提问来源于stack exchange，提问作者user16009119