元素
元素
工具
博客
问答

React Strict Mode为什么导致useEffect两次执行？代码没问题却报错

♫慧慧 阅读 45
框架

我在React组件里用Strict Mode包裹App时，发现useEffect里的API请求执行了两次，控制台还报错说useState未定义。但移除Strict Mode后就正常了，这是为什么？

比如这个简单的计数器组件，明明初始化了state，但报错提示count未定义：



  

    
{{ count }}

    
  




export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

我检查了useEffect依赖项和组件结构都没问题，难道Strict Mode会额外触发初始化过程？

Redux性能优化组件设计
我来解答 赞 4 收藏
二维码
手机扫码查看
反馈
1 条解答
Mr-世玉
Mr-世玉 Lv1
这个问题我之前也踩过坑，说白了就是React Strict Mode的行为导致的。Strict Mode其实是为了帮你提前发现潜在问题，但它的一些机制可能会让人摸不着头脑。

先说useEffect执行两次的问题。在开发环境下，Strict Mode会故意让函数组件渲染两次，这是它的设计，目的是帮你检查副作用代码是否安全。比如你的API请求如果在useEffect里没有正确处理依赖项，可能会引发重复调用或者状态不一致的问题。虽然这看起来很烦人，但上线到生产环境后，React不会这么干，所以不用担心性能问题。

至于你提到的“count未定义”的报错，这里有个关键点：你的代码写法其实是Vue的风格，而不是React的。React里根本没有data和methods这种写法，你得用useState和useEffect这些Hooks来管理状态。我猜你是刚从Vue转到React吧？我也经历过这个阶段，很容易把两者的语法搞混。

正确的React写法应该是这样：

import React, { useState, useEffect } from 'react';



function Counter() {

  const [count, setCount] = useState(0);



  useEffect(() => {

    console.log(当前计数是：${count});

  }, [count]); // 注意这里的依赖项



  return (

    


      
{count}


      

    


  );

}



export default Counter;


这里有几个血泪教训：
1. 确保你用的是React的Hooks语法，别把Vue的写法带过来。
2. 如果你用了Strict Mode，记得检查useEffect里的逻辑，确保它能安全地运行多次，比如避免重复的API调用。
3. 控制台报错的时候，先确认是不是框架的基本用法有问题，而不是直接怀疑框架本身有bug。

总结一下，你的问题其实是React和Vue的语法混淆加上Strict Mode的双重作用。改用React的标准写法后，问题应该就能解决。
点赞 1
2026-02-19 10:14
相关推荐
元素
元素
工具
博客
问答
登录/注册