useEffect中条件语句失效咨询：状态赋值异常与重复打印

一、条件判断未生效的原因 #

你的useEffect依赖数组是空的[]，这意味着它只会在组件首次挂载时执行一次。而getPortInfo是异步的axios请求，当useEffect执行条件判断时，userPortInfo还处于初始值''（空字符串），此时'' == 1的结果是false，所以templateCss被设置为'first-theme'。

等异步请求完成后，setUserPortInfo(e.template)把userPortInfo改成了1，但此时useEffect因为依赖为空，不会再次触发，所以templateCss不会更新。

二、控制台多次打印的原因 #

React组件会在状态更新、props变化或父组件重新渲染时重新执行渲染逻辑。你把console.log直接写在组件顶层，每次渲染都会执行：

• 组件首次挂载：打印初始的userPortInfo('')和templateCss('')
• 异步请求完成，userPortInfo变为1：组件重新渲染，打印1和'first-theme'
• 如果getUserInfo或getPortfolio也更新了其他状态，还会触发更多次渲染和打印

三、修复方案 #

方案1：拆分并更新useEffect依赖 #

把异步请求和状态更新逻辑拆分，确保userPortInfo变化时能重新计算templateCss：

// 只在组件挂载时执行异步请求
useEffect(() => {
  getUserInfo();
  getPortfolio();
  getPortInfo();
}, []);

// 监听userPortInfo变化，更新templateCss
useEffect(() => {
  userPortInfo == 1
    ? setTemplateCss('second-theme')
    : setTemplateCss('first-theme');
}, [userPortInfo]);

方案2：用useMemo直接计算templateCss（更推荐） #

不需要额外维护templateCss状态，直接根据userPortInfo实时计算，避免状态不同步：

const templateCss = useMemo(() => {
  return userPortInfo == 1 ? 'second-theme' : 'first-theme';
}, [userPortInfo]);

优化控制台打印 #

如果只想查看状态的最终变化，可以把打印逻辑放到监听状态的useEffect里：

useEffect(() => {
  console.log('userPortInfo:', userPortInfo);
  console.log('templateCss:', templateCss);
}, [userPortInfo, templateCss]);

内容的提问来源于stack exchange，提问作者many-yun